加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 10:07:42 所属栏目:安全 来源:网络整理
导读:1.现象 ul ng-app="myApp" ng-controller="myCtrl" li ng-repeat="x in items" strong{{x}}/strong /li/ulscript //使用ng-repeat 重复 html代码 var app = angular.module('myApp',[]); app.controller('myCtrl',function ($scope) { $scope.items = [1,2,3

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>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读