ng-model 数据不更新及 ng-repeat【ngRepeat:dupes】错误

一、ng-include 引入的文件中，ng-model 数据不更新

　　例如， $scope.username = “Jones” 。此时，在 ng-include 引入的文件中，直接使用 ng-model="username" 会出现这种情况。

　　原因：ng-include指令创建了一个新的数据范围，它是原始范围的实例

　　解决方法：

　　　　1、可以直接在包含的Html模板中这样写 ng-model =“$parent.username”

　　　　2、或者将其改为 object 对象并绑定到对象的属性，例如：

　　　　　　$scope.data = { username : “Jones” };

　　　　　在Html模板中这样写 ng-model =“data .username”

二、使用 ng-repeat 报错 Error: [ngRepeat:dupes]

　　例如，下面的代码就会报错：

<html>
   <head>
    <script src="angular-1.2.2/angular.js"></script>
     <script>
          function myController($scope,$rootScope,$injector)
         {
             $scope.dataList = [1,2,1];
          }
     </script>
   </head>
   <body ng-app ng-controller="myController">
         <div ng-repeat="data in dataList">
             {{data}}
         </div>
   </body>
</html>

　　原因：ng-Repeat不允许collection中存在两个相同Id的对象。对于数字或者字符串等基本数据类型来说，它的id就是它自身的值。　　　　

　　解决方法：

　　1、为了规避这个错误，可以定义自己的track by表达式。例如直接拿循环的索引变量$index来用

ng-repeat="data in dataList track by $index"

　　2、或者写成对象数据类型，那么就算内容一摸一样，ng-repeat也不会认为这是相同的对象。例如上面可以改成

$scope.dataList = [{"num":1},{"num":2},{"num":1}];

三、selsect 中 ng-model 的值和选中的值不同步

　　例如下面的图片中，修改数据时，加载原本的数据， $scope.dispaly= "line" ，在 select 中 ng-model=“dispaly”。可以看到直接输出数据是“line”, 理论上下拉菜单显示的应该是 “折线图”。

　　原因：上述下拉菜单默认显示了第一个，提交的时候，也是提交了正确的数据。所以，这是本人书写时遗漏了~~

　　解决方法：在 option中使用 ng-selected，如下：

<select class="form-control" ng-model="display" required ng-disabled="isDisabled">
      <option value="{{key}}" ng-repeat="(key,value) in lists" ng-selected="display === key">{{value}}</option>
</select>

ng-model 数据不更新 及 ng-repeat【ngRepeat:dupes】错误

ng-model 数据不更新及 ng-repeat【ngRepeat:dupes】错误