AngularJs array not adding duplicates

Question

I wrote s small bit of code that adds names to an array. The problem I am getting is that if I try add the same name more than once it will not allow me. It also will not allow me any other name after trying to add a duplicate name. Here is my Angular code

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


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

});

And here is my 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>

dustyrockpyle · Accepted Answer · 2014-06-30 19:22:50Z

5

Try changing your span to this:

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

By default ng-repeat tracks items in the array by reference, and duplicate literals can have the same identity. The default behavior will cause errors when duplicates exist in your array, which will cause the behavior you see (It fails to add the duplicate, and then stops working completely).

You should probably see an error from ng-repeat in your console when it encounters duplicates.

edited Jun 30, 2014 at 19:22

answered Jun 30, 2014 at 17:21

dustyrockpyle

3,19419 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Munsch Over a year ago

Just to clarify slightly, @dustyrockpile is saying that you might actually have the duplicates in your array, but you're not seeing them in the output. Perhaps you could peek at the contents of $scope.names to make sure or stick something like {{ names | json }} into the page just to check.

dustyrockpyle Over a year ago

Thanks @JohnMunsch, I've updated my answer to clarify.

Collectives™ on Stack Overflow

AngularJs array not adding duplicates

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related