Seamy Seamy - 1 month ago 8
Javascript Question

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>

Answer

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>
Comments