Frederick M. Rogers Frederick M. Rogers - 6 months ago 63
Javascript Question

Angular - Error: ngRepeat:dupes Duplicate Key in Repeater

I am working on a simple todo app that adds task to an existing array of json data. However when I try to add more than one task I get this error:

Error: [ngRepeat:dupes]
. I can't for the life of me figure out what is going wrong. I suspect it might have something to do with the namespace, but after changing names around a few times I still get the same error. If anybody could point me in the right direction I would much appreciate it.

The HTML Code

<div id="taskComplete" ng-app="taskComplete">
<div class="container" ng-controller="taskCtrl">

<div id="taskCompleteHeading" class="row">
<div class="col-xs-12">
<div class="page-header">
<h1 class="text-center">TaskComplete <small>An AgularJs App</small></h1>
</div>
</div>
</div>

<div id="newTaskSubmit">
<input type="text" ng-model="newTask.title">
<input type="text" ng-model="newTask.description">
<button type="button" ng-click="addTask(newTask)">Add Task</button>
</div>

<div class="well">
<pre>{{newTask | json}}</pre>
</div>
<div ng-repeat="task in activeTasks">
<h4>{{task.title}}</h4>
</div>

</div>
</div>


UPDATED SOLUTION

<div ng-repeat="task in activeTasks track by $index">
<h4>{{task.title}}</h4>
</div>


The JAVASCRIPT Code

angular
.module('taskComplete')
.controller('taskCtrl', function($scope, taskFactory) {

$scope.activeTasks;

taskFactory.getTasks().success(function(data) {
$scope.activeTasks = data;
console.log($scope.activeTasks);
}).error(function(error) {
console.log(error);
});

$scope.newTask = {};

$scope.addTask = function(newTask) {
$scope.activeTasks.push(newTask);
}


});

Answer

Use track by $index:

ng-repeat="task in activeTasks track by $index"
Comments