angularJs中ng-repeat遍歷動態生成的表單元素繫結ng-model無效的問題
阿新 • • 發佈：2019-02-15
我在做練習中偶然遇到這個問題，與大家分享一下。我也是剛開始接觸angularJs,相信也有人同樣遇到過。
問題描述：在使用anjularJs框架核心模組ng雙向資料繫結，在ng-repeat遍歷物件或陣列的時候，用ng-model繫結動態生成表單元素時，利用$scope.$watch()，檢視是否繫結時，發現沒繫結到ng-model。
問題程式碼：
這段程式碼是在沒資料的時候可以直接在控制檯打印出true或false。<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.csdn.net/20161103195723492?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /> </span>
這段程式碼紅色部分就是問題所在，為什麼在控制檯列印打印不出來呢？這是因為ng-repeat的問題，查手冊可以知道，ng-repeat這個指令會建立新的作用域(scope),指令執行優先順序為1000。可想而知繫結的這個isAgreen繫結給誰了，沒錯就是這個新的作用於，那麼你外部的這個全域性作用於當然繫結不到值了，怎麼解決呢，因為你想讓全域性的$scope來繫結isAgreen，這個還是要考慮清楚兩個作用於的關係，一個是全域性$scope,一個是ng-repeat的$scope，<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>
全域性$scope是區域性$scope的父物件，這樣寫就行了：$parent.isAgreen這樣就會繫結到全域性的$scope
