from:http://blog.csdn.net/u013451157/article/details/60866210

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

[html] view plain copy

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4. <meta charset="UTF-8">
  5. <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
  6. <style>
  7. .frame{
  8. padding: 5px 8px;
  9. margin: 0px;
  10. font-size: 12px;
  11. width: 320px;
  12. background-color: #eee;
  13. }
  14. .frame div{
  15. margin: 5px 0px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div ng-controller="myCtrl" class="frame">
  21. <div>
  22. a 的值： {{a}}  <br>
  23. b 的值： {{b}}
  24. </div>
  25. <div>
  26. 普通方式： <input type="checkbox" ng-model="a">
  27. </div>
  28. <div ng-if="!a">
  29. ngIf方式：<input type="checkbox" ng-model="$parent.b">
  30. </div>
  31. </div>
  32. <script>
  33. angular.module('myApp', [])
  34. .controller('myCtrl', function($scope){
  35. $scope.a = false;
  36. $scope.b = false;
  37. })
  38. </script>
  39. </body>
  40. </html>

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

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

【AngularJS】解决ng-if中的ng-model值无效的问题(转)的更多相关文章

  1. VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题

    VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...

  2. ruby for in 循环中改变i的值无效

    ruby for in 循环中改变i的值无效 for j in 1..5 puts "#{j}hehe" j = j + 2 #break end 在循环中,使用j = j + 2 ...

  3. 如何解决流程开发中SheetRadioButtonList页面取值问题

    分享一个常见的取值问题. 应用场景: SheetRadioButtonList控件,点击其中一项执行事件操作.如果是页面加载的情况下,值就无法取到. 具体原因如下: 我给SheetRadioButto ...

  4. 教你彻底解决css中设置z-index的值无效的问题

    在使用z-index这个属性之前,我们必须先了解使用z-index的必要条件: 1.要想给元素设置z-index样式,必须先让它变成定位元素,说的明白一点,就是要给元素设置一个postion:rela ...

  5. 弹窗中修改select默认值遇到的问题

    弹窗中修改select默认值无效 前提: 项目中遇到一个需求, 在一个弹窗中,有很多个select都是在打开弹窗的同时由js自动生成的(每次打开都自动重新生成一遍). 弹窗打开后,从每个select的 ...

  6. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  7. [译]ng指令中的compile与link函数解析 转

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...

  8. 【码在江湖】前端少侠的json故事（中）ng的json

    ng的json 正所谓"人在江湖,身不由己",在开发之路上前端少侠dk遇到过种种困难,尤其在与后端进行数据对接的时候,不得不逼迫自己以极快的速度去学习和掌握一些奇招怪式,正当他以为 ...

  9. 不知道张(zhāng)雱（pāng）是谁？你out了！

    张(zhāng)雱(pāng)是谁?也许你已经听说过了,也许你还没听说过呢,不过你一定听说过老刘——刘强东,没错,这二人是有关系的,什么关系,京东是老刘的,而张雱呢?张雱是京东旗下52家关联公司法人代 ...

随机推荐

  1. SpringBoot静态资源访问

    在我们开发Web应用的时候,需要引用大量的js.css.图片等静态资源. 默认配置: Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则: /static ...

  2. 第八节：分支开发之合并到master

    流程:在客户端创建分支,修改代码,并push,然后在页面处理即可.(区别在于一个在客户端,一个在页面) 实际的开放中要记得打tag,不然到时候出问题了以后不知道从哪里开始.

  3. C#生成exe、dll版本号自动增加

    修改AssemblyInfo.cs 1.注释[assembly: AssemblyFileVersion("1.0.0.0")] 2.[assembly: AssemblyVers ...

  4. （1.7）mysql profiles分析

    mysql profiles分析 作用:记录会话查询SQL所用时间 1.开启 2.使用 [2.1]先使用一个查询 [2.2]然后再运行 show profiles; [2.3]查看执行过程中每个状态和 ...

  5. mysql 数据表操作 目录

    mysql 数据表操作 存储引擎介绍 mysql 使用存储引擎 mysql 数据表的增删改查 mysql 数据类型 mysql 约束条件

  6. MySql left join 多表连接查询优化语句

    先过滤条件然后再根据表连接 同时在表中建立相关查询字段的索引这样在大数据多表联合查询的情况下速度相当快 创建索引: create index ix_register_year ON dbo.selec ...

  7. 显示日期的指令： date

    1.显示日期的指令: date (1)参数: (2)实例

  8. RN-android 打包后，部分图片不显示

    安卓打包后以及真机调试的时候部分图片不显示,原因是 安卓的包文件并不会每次都把图片资源重新打包.也就是说,你第一次打完包之后,再更新图片与代码,代码是会生效,但是图片文件是拿不到的,解决办法是 ../ ...

  9. KinectFusion测试

    谁告诉我说KinectFusion不能直接在Kinect2上直接用.今天心血来潮看了一下Kinect for Windows SDK中的头文件,发现完全可以用啊. 于是用SDK自带的Demo测试了一下 ...

  10. 死锁与递归锁 信号量 event 线程queue

    1.死锁现象与递归锁 死锁:是指两个或两个以上的进程或线程在执行过程中,因争抢资源而造成的一种互相等待的现象,若无外力作用,它们都将无法推进下去,此时称系统处于死锁状态或系统产生了死锁,这些永远在互相 ...