ng-repeat添加项目(AngularJs 1.2.26)

发布时间：2020-12-17 18:11:36 所属栏目：安全来源：网络整理

导读：我正在使用ng-repeat测试代码, 但是使用旧版本的角度,它是有效的,但是使用最新版本它不起作用！我解释：我测试这段代码： script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.0/angular.js"/scriptdiv ng-app="myApp" div ng-controller

我正在使用ng-repeat测试代码,
但是使用旧版本的角度,它是有效的,但是使用最新版本它不起作用！

我解释：

我测试这段代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.0/angular.js"></script>

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="item in items">{{item}}</li>
        </ul>
        <input ng-model="newItem" type="text"></input>
        <button ng-click="add(newItem)">Add</button>
    </div>
</div>

<script>
var app = angular.module('myApp',[]);

app.controller('MyCtrl',function($scope) {
    $scope.items = ["A","B","C","D"];
    $scope.add = function(item) {
        $scope.items.push(item);
    };

});
</script>

当我添加severarls项目时,它工作正常！与angular.js / 1.1.0版本
它添加了一个新项目

但是使用最新版本它不起作用！
我们可以添加一个项目,但如果我们添加多个项目,则会出现此错误：

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use ‘track by’ expression to specify unique keys. Repeater: item in items,Duplicate key: string:d

所以我的问题是我们如何在新闻版本的ng-repeat中添加新闻项目？

谢谢！

解决方法

请看这里 https://docs.angularjs.org/error/ngRepeat/dupes

通过$index添加到ng-repeat轨道,即：

<li ng-repeat="item in items track by $index">

演示如下：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="item in items track by $index">{{item}}</li>
        </ul>
        <input ng-model="newItem" type="text"></input>
        <button ng-click="add(newItem)">Add</button>
    </div>
</div>

<script>
var app = angular.module('myApp',"D"];
    $scope.add = function(item) {
        $scope.items.push(item);
    };

});
</script>

（编辑：李大同）

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