AngularJS解决ng-if中的ng-model值无效的问题


Posted in Javascript onJune 21, 2017

与其他指令一样,ng-if指令也会创建一个子级作用域,因此,如果在ng-if指令中添加了元素,并向元素属性增加 ng-model指令,那么ng-model指令对应的作用域属性子级作用域,而并非控制器注入的$scope作用域对象,这点在进行双向数据绑定时,需要引起注意。

<!DOCTYPE html>  
<html ng-app="myApp">  
<head>  
<meta charset="UTF-8">  
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>  
<style> 
 .frame{ 
  padding: 5px 8px; 
  margin: 0px; 
  font-size: 12px; 
  width: 320px; 
  background-color: #eee; 
 } 
 .frame div{ 
  margin: 5px 0px; 
 } 
</style>  
</head>  
<body>  
 <div ng-controller="myCtrl" class="frame"> 
  <div> 
   a 的值: {{a}} <br> 
   b 的值: {{b}} 
  </div> 
  <div> 
   普通方式: <input type="checkbox" ng-model="a"> 
  </div> 
  <div ng-if="!a"> 
   ngIf方式:<input type="checkbox" ng-model="$parent.b"> 
  </div> 
 </div> 
 
 <script> 
  angular.module('myApp', []) 
   .controller('myCtrl', function($scope){ 
    $scope.a = false; 
    $scope.b = false; 
   }) 
 </script> 
</body>  
</html>

在ng-if方式中,每个包含的元素都拥有自己的作用域,因此,复选框元素也拥有自己的$scope作用域。相对于控制器作用域来说,这个作用域属于一个子级作用域,所以,如果它想绑定控制器中的变量值,必须添加$parent标识,只有这样才能访问到控制器中的变量。

因此,解决ng-if中ng-model值无效的问题,主要方法就是在绑定值时添加$parent标识,或者用ng-show指令代替ng-if指令,这两种方法都可以达到同样的页面效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE bug table元素的innerHTML
Jan 11 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 #Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 #Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 #Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 #Javascript
javascript+html5+css3自定义提示窗口
Jun 21 #Javascript
详解webpack分离css单独打包
Jun 21 #Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 #Javascript
You might like
php无限分类使用concat如何实现
2015/11/05 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
date.parse在IE和FF中的区别
2010/07/29 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
AngularJS内置指令
2015/02/04 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
python实现图像拼接
2020/03/05 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
C++程序员求职信范文
2014/04/14 职场文书
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
vue实现登陆页面开发实践
2022/05/30 Vue.js