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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
Node.js Buffer用法解读
May 18 Javascript
js+h5 canvas实现图片验证码
Oct 11 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
twig模板常用语句实例小结
2016/02/04 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
JavaScript 继承详解(四)
2009/07/13 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
Three.js基础部分学习
2017/01/08 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
Python程序设计入门(1)基本语法简介
2014/06/13 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python处理中文标点符号大集合
2018/05/14 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
python将音频进行变速的操作方法
2020/04/08 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
任意存:BOXFUL
2018/05/21 全球购物
学生自我鉴定范文
2013/10/04 职场文书
最新的咖啡店创业计划书
2013/12/30 职场文书
办理生育手续介绍信
2014/01/14 职场文书
致裁判员加油稿
2014/02/08 职场文书
解除租房协议书
2014/12/03 职场文书
读书笔记怎么写
2015/07/01 职场文书
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python