AngularJs数组不添加重复项

Question

我编写了一小段代码，将名称添加到数组中。我遇到的问题是，如果我尝试多次添加相同的名称，它将不允许我这样做。在尝试添加重复名称后，它也不允许我使用任何其他名称。这是我的 Angular 代码

    app.controller('DirectoryController', function($scope){
$scope.name='';
$scope.names= [];


$scope.addName = function(){
    $scope.names.push($scope.name);
}

});

这是我的html

    <div ng-controller= "DirectoryController">
    <h3>Name:</h3><input type="text" ng-model='name'>
    <button ng-click = "addName()">Save</button>
    <hr/>
    <span ng-repeat="name in names">{{name}}<br/></span>
</div>

Answer 1

尝试将您的跨度更改为：

<span ng-repeat="name in names track by $index">{{name}}<br/></span>

默认情况下，ng-repeat 通过引用跟踪数组中的项目，重复的文字可以具有相同的标识。当您的数组中存在重复项时，默认行为会导致错误，这将导致您看到的行为（添加重复项失败，然后完全停止工作）。

当遇到重复项时，您可能会在控制台中看到来自 ng-repeat 的错误。