AngularJS：'不允许在转发器中重复。使用 'track by' 表达式来指定唯一键。”

Question

我在 codepen 上有这个代码示例：http://codepen.io/anon/pen/hauvb

问题是 ng-repeat 在我将表单对象推送到数组后没有更新。我可以看到内容正在添加到数组中，但 ng-repeat 没有更新。我尝试使用 $apply 但我被告知我不需要它，因为 ng-click 为我更新了 $digest。任何帮助将不胜感激，以了解我所缺少的。谢谢。

var app = angular.module('theTasker', []);


app.controller('MyTasks', [function(){
  this.tasks = [
    {
      title: "This is the title",
      completed: false
    },
    {
      title: "This is the title",
      completed: true
    },
    {
      title: "This is the title",
      completed: false
    }
  ];

  this.myform = {
    item: "Item Title",
    completed: false
  };
  this.addtask = function(){
    this.tasks.push(this.myform);
  };
}])

编辑：

上面的代码产生了这个错误：

不允许在转发器中重复。使用“track by”表达式 指定唯一键。

Answer 1

在测试您的代码时出现错误

不允许在转发器中重复。使用“track by”表达式指定唯一键。

将您的 HTML ng-repeat 行更改为如下所示：

li(ng-repeat="task in mytasks.tasks track by $index")

这是一个例子plnkr

您在 myform 对象中也有错字，您在其中指定了“项目”而不是“标题”，因此添加了新任务，但标题未显示。

将其更改为如下所示：

this.myform = {
  title: "Item Title",
  completed: false
};

这是一个固定的code-pen

Answer 2

您的数组需要在范围内。 Trythis 确保 ng-repeat 在“任务”上重复：

app.controller('MyTasks', ['$scope', function($scope){
  $scope.tasks = [
    {
      title: "This is the title",
      completed: false
    },
    {
      title: "This is the title",
      completed: true
    },
    {
      title: "This is the title",
      completed: false
    }
  ];

  this.myform = {
    item: "Item Title",
    completed: false
  };
  this.addtask = function(){
    $scope.tasks.push(this.myform);
  };
}])