angularJs中ng-repeat遍历动态生成的表单元素绑定ng-model无效的问题

来源：互联网发布：正规淘宝客服兼职编辑：程序博客网时间：2024/05/03 09:44

我在做练习中偶然遇到这个问题，与大家分享一下。我也是刚开始接触angularJs,相信也有人同样遇到过。

问题描述：在使用anjularJs框架核心模块ng双向数据绑定，在ng-repeat遍历对象或数组的时候，用ng-model绑定动态生成表单元素时，利用$scope.$watch()，查看是否绑定时，发现没绑定到ng-model。

问题代码：

<span style="font-size:18px;color:#006600;"><!DOCTYPE html><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>

这段代码是在没数据的时候可以直接在控制台打印出true或false。

<span style="color:#006600;"><!DOCTYPE html><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>

这段代码红色部分就是问题所在，为什么在控制台打印打印不出来呢？这是因为ng-repeat的问题，查手册可以知道，ng-repeat这个指令会创建新的作用域(scope),指令执行优先级为1000。可想而知绑定的这个isAgreen绑定给谁了，没错就是这个新的作用于，那么你外部的这个全局作用于当然绑定不到值了，怎么解决呢，因为你想让全局的$scope来绑定isAgreen，这个还是要考虑清楚两个作用于的关系，一个是全局$scope,一个是ng-repeat的$scope，

全局$scope是局部$scope的父对象，这样写就行了：$parent.isAgreen这样就会绑定到全局的$scope

0 0