博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ng-if 下ng-model失效 ng-repeat循环输出单选框
阅读量:6122 次
发布时间:2019-06-21

本文共 1290 字,大约阅读时间需要 4 分钟。

与其他指令一样,ng-if指令也会创建一个子级作用域,因此,如果在ng-if指令中添加了元素,并向元素属性增加 ng-model指令, 那么ng-model指令对应的作用域属性子级作用域,而并非控制器注入的$scope作用域对象,这点在进行双向数据绑定时,需要引起注意。  在ng-if方式中,每个包含的元素都拥有自己的作用域,因此,复选框元素也拥有自己的$scope作用域。相对于控制器作用域来说,这个作用域属于一个子级作用域,所以,如果它想绑定控制器中的变量值,必须添加$parent标识,只有这样才能访问到控制器中的变量。

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

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

第一个ngif---{

{obj.xx}}
{
{x.num}}

第二个ngif--{

{obj.xx}}

选中的数字:{

{obj.xx}}

js部分
var app = angular.module('app1', []); app.controller('c1', function ($scope) {
$scope.a=true; $scope.b=true; $scope.arry=[ {
'id':'liu', num:965 },{
'id':'luke', num:562 },{
'id':'jack', num:326 } ]; //这里本来只需要定义一个 $scope.obj={}的对象其实就可以了, 我这里是让单选框默认选择最后一个单选框为选中状态所以就将ng-model中的xx赋值为json数组最后num中的数字值了 $scope.obj={
xx:$scope.arry[$scope.arry.length-1].num }; $scope.showtime=function(){
console.log("输出数字:"+$scope.obj.xx); } });
上面三个obj.xx值虽然在不同的ngif下他们的值也是一样绑定了 截图效果: 1.开始默认最后一个单选框选中 2.再次点击其他单选框,他们的值就绑定了

2

 

笔记做完了!有问题或者其他方法,望各位大神指点!

 

 

转载于:https://www.cnblogs.com/liucong7708/p/6481145.html

你可能感兴趣的文章
N26-第一周作业
查看>>
4月11日中高项作业
查看>>
华为交换机AAA特性与思科ACS对接
查看>>
二:Unit 8
查看>>
TortoiseSVN客户端重新设置用户名和密码
查看>>
nagios邮件报警配置
查看>>
Java 生产条形码代码
查看>>
python web开发-flask连接sqlite数据库
查看>>
Zxing二维码扫描
查看>>
MMU的作用
查看>>
决心书
查看>>
计算机网络(2)
查看>>
Oracle 常用语句备份
查看>>
《网络》:设置三个密码:通过console口连接设备,进入特权模式,登录Telnet
查看>>
保存密码之MD5码
查看>>
.9图怎么切?iOS如何处理这种图片
查看>>
Python数据挖掘与机器学习_通信信用风险评估实战(3)——特征工程
查看>>
那些年用过的Redis集群架构
查看>>
【原创】c++拷贝初始化和直接初始化的底层区别
查看>>
解决Xcode10 library not found for -lstdc++ 找不到问题
查看>>