Frederick M. Rogers Frederick M. Rogers - 1 year ago 182
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 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 class="well">
<pre>{{newTask | json}}</pre>
<div ng-repeat="task in activeTasks">



<div ng-repeat="task in activeTasks track by $index">


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


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

$scope.newTask = {};

$scope.addTask = function(newTask) {


Answer Source

Use track by $index:

ng-repeat="task in activeTasks track by $index"
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download