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

与其他指令一样，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指令，这两种方法都可以达到同样的页面效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS ngModel实现指令与输入直接的数据通信

    AngularJS ngModel实现指令与输入直接的数据通信

    首先来看一下效果,在拖动input[range]的时候,下面的动画会随着拖动而发生改变,利用的原理就是ngModel实现的通信.实现的原理就是通过在指令中引入^ngModel来实现指令内部与外部之间的通信. 下面有几个点: 1.$formatters中push进去的函数实现modelValue转成valeuValue. 2.$render方法实现把viewValue中的值渲染到模板中. 3.$setViewValue实现的是更新模板中的viewValue值. 4.$parsers中push进去的

  • AngularJS基础 ng-model-options 指令简单示例

    AngularJS ng-model-options 指令 AngularJS 实例 在失去焦点时绑定输入框的值到 scope 变量中: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></scrip

  • django模型中的字段和model名显示为中文小技巧分享

    简单方法: models.py 复制代码 代码如下: class IceCreamBar(models.Model):     title = models.CharField(max_length=200,db_index=True,verbose_name="名称")         shell = models.CharField(max_length=100,verbose_name='外皮')         filling = models.CharField(max_le

  • 深入浅析AngularJS和DataModel

    AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. 什么是 AngularJS? AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易. AngularJS 把应用程序数据绑定到 HTML 元素. AngularJS 可以克隆和重复 HTML 元素

  • angularjs在ng-repeat中使用ng-model遇到的问题

    在ng-repeat中使用ng-model时会有许多问题,有的人碰到无法获取绑定的数据内容,有的人遇到改动绑定的数据内容时所有循环生成的内容一起改变.上面的问题我在开发时也遇到过,但是解决后我却怎么也还原不了那种情况了,只能先简单介绍一下无法获取的情景该如何解决. 例如: html: <body> <div ng-controller="selectController"> <div ng-repeat="pop in citylist"

  • angularjs自定义ng-model标签的属性

    angularjs自定义ng-model标签的属性

    有的时候我们需要为非input类型的元素添加ng-model来实现双向的数据绑定,从而减少冗余代码,那么可以尝试一下的方式 例如:我页面中使用了contenteditable这个属性来实现用户可直接编译的div元素 html: <style> .text{ margin:0 auto; width:100px; height:50px; border:1px solid red; } </style> </head> <body> <div ng-co

  • Django中模型Model添加JSON类型字段的方法

    本文实例讲述了Django中模型Model添加JSON类型字段的方法.分享给大家供大家参考.具体如下: Django里面让Model用于JSON字段,添加一个JSONField自动类型如下: class JSONField(models.TextField): __metaclass__ = models.SubfieldBase description = "Json" def to_python(self, value): v = models.TextField.to_pytho

  • AngularJS基础 ng-model 指令详解及示例代码

    AngularJS ng-model 指令 AngularJS 实例 绑定输入框的值到 scope 变量中: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </hea

  • AngularJs 弹出模态框（model）

    推荐阅读:详解AngularJS 模态对话框 $modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们. $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$rootScope controller:为$modal指定的控制器,初始化$scope,该控制器可用$modalInstance注入 res

  • 解决element-ui的下拉框有值却无法选中的情况

    问题描述: 在使用Vue框架和element-ui开发时,下拉框遇见一个问题,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值,也就是下拉框值无法选中.(踩坑踩得莫名其妙) 代码段: <el-select v-model="value" placeholder="请选择" @change="change()"> <el-option v-for="item in options&

  • AngularJS解决ng界面长表达式(ui-set)的方法分析

    本文实例讲述了AngularJS解决ng界面长表达式(ui-set)的方法.分享给大家供大家参考,具体如下: 本文来自网友sun shine的问题,问题如下: 您好, 我想求教一个问题.     在$scope中我的对象名字写的特别深, 在 html中我又多次用到了同一个对象, 对不对在 html中让它绑定到一个临时变量呢?     比如:     $scope.this.is.a.very.deep.obj = {     'name': 'xxx',     'state': 'active

  • 解决在keras中使用model.save()函数保存模型失败的问题

    我使用的是anaconda安装的环境,其中有一个是h5py,自动安装的是2.7.0的版本,这个版本会导致保存模型时python奔溃. conda install h5py==2.8.0 将h5py更新一个版本即可解决这个问题. 补充知识:Django安装提示错误 使用sudo pip install ......的时候出现下面一段代码: The directory '/Users/XX/Library/Caches/pip' or its parent directory is not owne

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

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

  • 完美解决Thinkphp3.2中插入相同数据的问题

    完美解决Thinkphp3.2中插入相同数据的问题

    问题描述 今天在使用TP3.2插入数据的时候,为了避免插入相同的数据(所谓相同的数据,其主键相同或者是唯一索引的字段相同),我创建的索引如下图,主键索引为自增字段,不可能出现重复,即唯一索引可能会出现重复,我希望的是uid,year,mounth,day 这三个字段出现相同的话,就更新当前记录. 问题解决办法 在之前面对这样的问题的时候,我们知道,MySQL提供了ON DUPLICATE KEY UPDATE或者REPLACE INTO来解决. 使用ON DUPLICATE KEY UPDATE

  • 解决Angular.js中使用Swiper插件不能滑动的问题

    我们都知道swiper是交互体验十分好的轮播插件 但是通过angular(ng-repeat)循环出来的swiper不能轮播的解决方案 通常我们都是通过以下方法来执行: html <div class="swiper-container" ng-controller="swiperController"> <div class="swiper-wrapper"> <div class="swiper-sli

  • angularjs手动识别字符串中的换行符方法

    情景一 html: <textarea style="text-align: left;color: yellow;" disabled="true">{{value}}</textarea> controller: $scope.value="1.javaScript \n 2.html5 \n 3.C++"; 显示: 1.javaScript 2.html5 3.C++ 情景二 html: <textarea s

  • 解决ng-repeat产生的ng-model中取不到值的问题

    最近遇到在ng-repeat产生的textarea中绑定ng-model后,在js中取不到ng-model值的问题. html的代码结构如下 <div class="ques-item hide1 show9a" id="q10"> <div class="ques-item-question"> 10.{{questions[9].questionContent}} </div> <div class=

  • 详解Backbone.js框架中的模型Model与其集合collection

    什么是 Model Backbone 的作者是这样定义 Model 的: Model 是任何一个 web 应用的核心,它包含了交互的数据以及大部分的逻辑.例如:转化.验证.属性和访问权限等. 那么,我们首先来创建一个Model: Person = Backbone.Model.extend({ initialize: function(){ alert("Welcome to Backbone!"); } }); var person = new Person; 上述代码中,我们定义了

  • 完美解决node.js中使用https请求报CERT_UNTRUSTED的问题

    只要调用了没有受信的https就会报错:CERT_UNTRUSTED 简单的解决方法就是设置环境变量回避非授信证书的问题. 只要在请求的代码之前加上如下代码即可: process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0"; 结束!!! 以上就是小编为大家带来的完美解决node.js中使用https请求报CERT_UNTRUSTED的问题全部内容了,希望大家多多支持我们~

随机推荐