我正在使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。