问题描述
所以我只是从 angular 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"
当您使用对象数组(不带 track by)时，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 数组 - 重复值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！