我在做练习中偶然遇到这个问题,与大家分享一下。我也是刚开始接触angularJs,相信也有人同样遇到过。
问题描述:在使用anjularJs框架核心模块ng双向数据绑定,在ng-repeat遍历对象或数组的时候,用ng-model绑定动态生成表单元素时,利用$scope.$watch(),查看是否绑定时,发现没绑定到ng-model。
问题代码:
<span style="font-size:18px;color:#006600;"><!DOCTYPE html>这段代码是在没数据的时候可以直接在控制台打印出true或false。
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script>
</head>
<body ng-controller="myCtrl">
<input type="checkbox" ng-model="isAgreen"/>同意?
<script>
var app=angular.module('myApp',['ng']);
app.controller("myCtrl",function($scope){
$scope.$watch("isAgreen",function(){
console.log($scope.isAgreen);
});
});
</script>
</body>
</html>
<img src="http://img.blog.csdn.net/20161103195723492?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
</span>
<span style="color:#006600;"><!DOCTYPE html>这段代码红色部分就是问题所在,为什么在控制台打印打印不出来呢?这是因为ng-repeat的问题,查手册可以知道,ng-repeat这个指令会创建新的作用域(scope),指令执行优先级为1000。可想而知绑定的这个isAgreen绑定给谁了,没错就是这个新的作用于,那么你外部的这个全局作用于当然绑定不到值了,怎么解决呢,因为你想让全局的$scope来绑定isAgreen,这个还是要考虑清楚两个作用于的关系,一个是全局$scope,一个是ng-repeat的$scope,
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script>
</head>
<body ng-controller="myCtrl">
<table>
<thead>
<tr>
<th>请选择</th>
<th>姓名</th>
<th>生日</th>
</tr>
</thead>
<tbody>
<span style="color:#FF0000;"><tr ng-repeat="obj in data">
<td><input type="checkbox" ng-model="isAgreen" />同意?</td></span>
<td>{{obj.name}}</td>
<td>{{obj.age}}</td>
<td>{{$index}}</td>
</tr>
</tbody>
</table>
<!--<input type="checkbox" ng-model="order.isAgreen"/>-->
<button ng-click="add()">1....</button>
<script>
var app=angular.module('myApp',['ng']);
app.controller("myCtrl",function($scope){
$scope.data=[
{name:'zpc',age:20},
{name:'ppt',age:36}
];
$scope.$watch("isAgreen",function(){
console.log($scope.isAgreen);
});
});
</script>
</body>
</html>
全局$scope是局部$scope的父对象,这样写就行了:$parent.isAgreen这样就会绑定到全局的$scope