AngularJS ng-repeat数组-重复值 [英] Angularjs ng-repeat array - duplicate values
问题描述
所以我只是从有角度的JS开始，在处理数组时对ng-repeat有点困惑.下面的代码无法按原样工作...但是当我将dayNames更改为对象并为其提供键值对时，就可以了.
So I'm just starting with angular JS and am a little confused about ng-repeat when dealing with arrays. The below code doesn't work as is...but when I change dayNames to an object and give it key value pairs it's fine.
var myApp = angular.module('exampleApp', []);
myApp.controller("dayCtrl",function($scope){
$scope.dayNames = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "sunday", "monday", "tuesday", "wednesday", "thursday", "friday"];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<script src="angular.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="dayCtrl">
<h2>Hello, these are the days of the week</h2>
<ul>
<li ng-repeat="day in dayNames">{{day}}</li>
</ul>
</body>
</html>
推荐答案
它不能按原样工作，因为数组中有重复项.当您重复基元数组时，angular用于将数组中的项目与DOM元素相关联的默认唯一键是数组本身中的项目.当然，在您的情况下，它也不是唯一的，并且会导致中继器错误重复.
It does not work as is because you have duplicates in the array. When you repeat array of primitives, the default unique key used by angular to associate the item in the array with the DOM element is the item in the array itself. And ofcourse in your case it is not unique and it causes duplicate in repeater error.
您也可以通过使用track by $index避免这种情况，这会使索引成为标识符.
You could avoid this by using track by $index as well, which makes the index to be the identifier.
ng-repeat="day in dayNames track by $index"
当您使用对象数组(不带跟踪依据)时，angular将唯一ID添加到数组每个项目上名为$$hashkey的新属性中.然后将此属性用作通过标识将DOM元素与数组中相应项目关联的键.在数组中移动相同的对象将以相同的方式在DOM中移动DOM元素.因此，当您使用对象数组时，您不会看到任何问题，因为所有这些哈希键都是唯一的.
When you use array of objects (without track by) angular adds the unique id to a new property called $$hashkey on each item of the array. This property is then used as a key to associated DOM elements with the corresponding item in the array by identity. Moving the same object in array would move the DOM element in the same way in the DOM. So when you use array of objects you do not see any issues, because all of those hashkeys are unique.
var myApp = angular.module('exampleApp', []);
myApp.controller("dayCtrl",function($scope){
$scope.dayNames = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "sunday", "monday", "tuesday", "wednesday", "thursday", "friday"];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<script src="angular.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="dayCtrl">
<h2>Hello, these are the days of the week</h2>
<ul>
<li ng-repeat="day in dayNames track by $index">{{day}}</li>
</ul>
</body>
</html>
这篇关于AngularJS ng-repeat数组-重复值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
