Angular data-binding stops working when array has duplicate values

Question

I have this html that binds the $scope.comments array to an unordered list;

<div ng-app="" ng-controller="commentController">
    <ul>
        <li ng-repeat="c in comments">
            {{ c }}
        </li>
    </ul>
<div>

Then this script to initialise and add more items to the list;

<script>
    function commentController($scope){
        $scope.comments = ['Hi There.'];
        $scope.addComment = function(){
            $scope.comments.push($scope.newcomment);
            $scope.newcomment='';
        };
    };   
</script>

This works fine until i attempt to add a duplicate item. Debugging shows me that Javascript does push the duplicate item to the array, but angular databinding no longer updates the list.

Any idea why, or what I am doing wrong?

score 2 · Accepted Answer · answered Nov 09 '14 at 09:54

use this code:

<div ng-app="" ng-controller="commentController">
    <ul>
        <li ng-repeat="c in comments track by $index">
            {{ c }}
        </li>
    </ul>
<div>

track by $index track the array element by index not by value. see this in detai

score 1 · Answer 2 · answered Nov 09 '14 at 09:57

1

you need to track by index instead of values, so in ng-repeat editthis line

ng-repeat="c in comments track by $index"

answered Nov 09 '14 at 09:57

A.B

20,110
3
37
71

Angular data-binding stops working when array has duplicate values

2 Answers2