AngularJs ng-repeat重复项异常解决方案

1.现象

<ul ng-app="myApp" ng-controller="myCtrl">
    <li ng-repeat="x in items">
        <strong>{{x}}</strong>
    </li>
</ul>
<script>
    //使用ng-repeat 重复 html代码
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.items = [1, 2, 3, 2];
    });
</script>

当数组中有重复项时，抛出异常

点击异常链接，没有看到异常

2.解决方法

默认在ng-repeat的时候每一个item都要保证是唯一的，否则console就会打出error告诉你哪个key/value是重复的。

指定跟踪值唯一可以了

<ul ng-app="myApp" ng-controller="myCtrl">
    <li ng-repeat="x in items track by $index">
        <strong>{{x}}</strong>
    </li>
</ul>
<script>
    //使用ng-repeat 重复 html代码
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.items = [1, 2, 3, 2];
    });
</script>