CODEWITHSUNDEEP
javascriptangularjs
Seamy
Seamy

Reputation: 307

ng:repeat dupes. Getting duplicate data in ng-repeat

Hey so I have a problem in my angular app in regard to dup data. I have identified the problem down to an exact ng-repeat but I can't see what is wrong with it. I am getting an error saying I have duplicate data but I can't see how it happening because I have only 4 items in my database currently. I have tried different things like renaming and such but to me it looks right so I'm a little stumped as to why I am getting the error. I am thinking maybe the data is being loaded twice but not sure how? Anyways I will post the relevant code and if some angular god out there can point me on my way I'd be forever grateful.

The error message is: angular.min.js:84 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.2.9/ngRepeat/dupes?p0=task%20in%20tasks%20track%20by%20task.id%20%7C%20filter%20%3A%20filterTask&p1=undefined

JavaScript

app.controller('tasksController', function ($scope, $http) {
    getTask(); // Load all available tasks 

    function getTask() {
        $http.post('ajax/getTask.php').success(function (data) {
            $scope.tasks = data;
        });
    }

    $scope.addTask = function (task) {
        $http.post('ajax/addTask.php?task=' + task).success(function (data) {
            getTask();
            $scope.taskInput = '';
        });
    };

    $scope.deleteTask = function (task) {
        if (confirm('Are you sure to delete this line?')) {
            $http.post('ajax/deleteTask.php?taskID=' + task).success(function (data) {
                getTask();
            });
        }
    };

    $scope.toggleStatus = function (item, status, task) {
        if (status == '2') {
            status = '0';
        } else {
            status = '2';
        }
        $http.post('ajax/updateTask.php?taskID=' + item + '&status=' + status).success(function (data) {
            getTask();
        });
    };
});

Html:

<div class="task">
    <label class="checkbox" ng-repeat="task in tasks track by task.id | filter : filterTask">
        <input
            type="checkbox"
            value="{{task.STATUS}}"
            ng-checked="task.STATUS==2"
            ng-click="toggleStatus(task.ID,task.STATUS, task.TASK)"/>
        <span ng-class="{strike:task.STATUS==2}">{{task.TASK}} [{{task.ID}}]</span>
        <a ng-click="deleteTask(task.ID)" class="pull-right"><i class="glyphicon glyphicon-trash"></i></a>
    </label>
</div>

Upvotes: 2

Views: 577

Answers (2)

whyyie
whyyie

Reputation: 792

There is few things that you need to note.
1) Try console.log($scope.tasks) and see what is being returned. It probably return something that you did not expect. It should be array of 4 objects based on your db and most probably the id of the item is being duplicated.

2) If there is duplicated id, try to use track by $index instead as it guaranteed to be unique. This should solves your error message issue.

3) track by should be placed in the end of expression, which is after filter. If not, you will notice that the filter expression will not be applied even you succeed in removing error message in step 1.

Your code should be working find with this.

<label class="checkbox" ng-repeat="task in tasks | filter: filterTask track by $index">...</label>

Upvotes: 1

Christian Zosel
Christian Zosel

Reputation: 1424

As the link in the error message suggests, you can work around the issue using track by:

<div ng-repeat="value in [4, 4] track by $index"></div>

Upvotes: 1

Related Questions