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

最新推荐文章于 2022-12-26 14:42:25 发布

zpcsgo

最新推荐文章于 2022-12-26 14:42:25 发布

阅读量7.3k

点赞数

分类专栏： angulaiJs 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/zpcsgo/article/details/53024621

版权

angulaiJs 专栏收录该内容

1 篇文章

订阅专栏

我在做练习中偶然遇到这个问题，与大家分享一下。我也是刚开始接触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="https://img-blog.youkuaiyun.com/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