一、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>