【AngularJS】解决ng-if中的ng-model值无效的问题(转)
from:http://blog.csdn.net/u013451157/article/details/60866210
与其他指令一样，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指令，这两种方法都可以达到同样的页面效果。
【AngularJS】解决ng-if中的ng-model值无效的问题(转)的更多相关文章
- VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...
- ruby for in 循环中改变i的值无效
ruby for in 循环中改变i的值无效 for j in 1..5 puts "#{j}hehe" j = j + 2 #break end 在循环中,使用j = j + 2 ...
- 如何解决流程开发中SheetRadioButtonList页面取值问题
分享一个常见的取值问题. 应用场景: SheetRadioButtonList控件,点击其中一项执行事件操作.如果是页面加载的情况下,值就无法取到. 具体原因如下: 我给SheetRadioButto ...
- 教你彻底解决css中设置z-index的值无效的问题
在使用z-index这个属性之前,我们必须先了解使用z-index的必要条件: 1.要想给元素设置z-index样式,必须先让它变成定位元素,说的明白一点,就是要给元素设置一个postion:rela ...
- 弹窗中修改select默认值遇到的问题
弹窗中修改select默认值无效 前提: 项目中遇到一个需求, 在一个弹窗中,有很多个select都是在打开弹窗的同时由js自动生成的(每次打开都自动重新生成一遍). 弹窗打开后,从每个select的 ...
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- [译]ng指令中的compile与link函数解析 转
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...
- 【码在江湖】前端少侠的json故事（中）ng的json
ng的json 正所谓"人在江湖,身不由己",在开发之路上前端少侠dk遇到过种种困难,尤其在与后端进行数据对接的时候,不得不逼迫自己以极快的速度去学习和掌握一些奇招怪式,正当他以为 ...
- 不知道张(zhāng)雱（pāng）是谁？你out了！
张(zhāng)雱(pāng)是谁?也许你已经听说过了,也许你还没听说过呢,不过你一定听说过老刘——刘强东,没错,这二人是有关系的,什么关系,京东是老刘的,而张雱呢?张雱是京东旗下52家关联公司法人代 ...
随机推荐
- python--列表、字典、元组、集合对比
数据类型# 计算机能处理的远不止数值,还可以处理文本.图形.音频.视频.网页等各种各样的数据,不同的数据,需要定义不同的数据类型.# a:整形和浮点型(正数和负数)# b:布尔类型(true,fals ...
- Arcengine 在SDE创建数据集提示应用程序未获得创建或修改此类型数据的方案的许可
解决方案:将license Control的属性修改一下,ArcGIS Engine的√去掉,把第二个打√就可以了: 参考资料:http://www.docin.com/p-925448534.htm ...
- mac mysql提示mysql.sock'
Warning: World-writable config file '/Applications/XAMPP/xamppfiles/etc/my.cnf' is ignored ERROR 200 ...
- [skill] 异或
都怪学习不好,或者老师教的不好.虽然知道异或的算法,但是始终不明白,到底有什么意义...直到今天,终于明白了. 还是应该怪我学的不好,不能怪老师. 今天有一个应用场景,写一个函数.这是一个hash表的 ...
- 转：centos7/rhel7安装较高版本ruby2.2/2.3/2.4+
centos7/rhel7安装较高版本ruby2.2/2.3/2.4+ 环境需求: 在Centos7.3中,通过yum安装ruby的版本是2.0.0,但是如果有些应用需要高版本的ruby环境,比 ...
- Mybatis中dao接口和mapper 的加载过程
这里考虑的是mybatis和spring整合的场景 1.在系统启动的时候,会去执行配置文件中有关扫描mybatis接口的配置:通过MapperScannerConfigurer扫描接口生成spring ...
- 命令行安装kvm虚拟机、桥接网络、用virt-manager管理
宿主机CentOS Linux release 7.2.1511 (Core),内核3.10.0-327.el7.x86_64 1.配置宿主机网络桥接 想让虚拟机有自己的ip且外网可访问,需要在安装虚 ...
- python中的一些用法总结
用python写了一个测试Demo,其中涉及到一些常用的用法,现在记录在这里,方便后续查阅: 1 python中全局变量的使用: 引用全局变量,不需要golbal声明,修改全局变量,需要使用globa ...
- dispatch_queue_set_specific可重入的gcd
有时候我们很希望知道当前执行的queue是谁,比如UI操作需要放在main queue中执行.如果可以知道当前工作的queue是谁,就可以很方便的指定一段代码操作在特定的queue中执行.这种做法让G ...
- SQL SERVER 基于数据库镜像的主从同步(数据库镜像实践汇总)
SQL SERVER 基于数据库镜像的主从同步 Author:chaoqun.guo createtime:2019-03-26 目录 SQL SERVER 基于数据库镜像的主从同步... 1 ...