当我试图运行一个数组时,数组的行为就像一个集合,我的意思是,如果我放入两个相等的值,程序就会崩溃



我正在做一个AngularJS程序,我想在其中运行一个数组。这是我的程序:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Array: {{t}}</p>
<span style="margin:1px;background-color:cyan;" ng-repeat="x in names">
{{x}}
<span>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//    $scope.names = ["Emil", "Ellen", "Tobias", "Linus", "Poul", "Peter"]; 
$scope.names = ["Emil", "Emil", "Tobias", "Linus", "Poul", "Peter"]; 
$scope.t = angular.isArray($scope.names);
});
</script>
</body>
</html>

如果我使用$scope.names的更高版本,它会起作用。当我拿下较低的一个时,它会崩溃。根据isArray的说法,它们都是数组,那么为什么它不起作用呢?

非常困惑。

ngRepeat不支持在同一数组中有两个相等的值,您应该使用具有唯一标识符的对象,如下所示:

$scope.names = [{id: 0, name: 'Emil'}, {id: 1, name: 'Emil'}];

或者您可以使用track by,如下例所示
有关ngRepeat和$index属性的更多信息,请点击此处

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Emil", "Tobias", "Linus", "Poul", "Peter"];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Array: {{t}}</p>
<!-- $index: This special property tracks the collection items by their index -->
<span style="margin:1px;background-color:cyan;" ng-repeat="x in names track by $index">
{{x}}
</span>
</div>

最新更新