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

前端之家收集整理的这篇文章主要介绍了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',2];
    });
</script>
原文链接:https://www.f2er.com/angularjs/149398.html

猜你在找的Angularjs相关文章