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);
  };
}])

修改

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

不允许在转发器中重复。使用＆＃39;跟踪＆＃39;表达到指定唯一键。

Answer 1

在测试代码时出现错误

不允许在转发器中重复。使用＆＃39;跟踪＆＃39;表达式以指定唯一键。

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

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

这里有一个例子plnkr

你在myform对象中也有一个拼写错误，你指定了＆＃39; item＆＃39;而不是标题＆＃39;，所以添加了新任务，但标题没有显示。

将其更改为：

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

这是一个固定的code-pen

Answer 2

您的阵列需要在范围内。尝试确保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);
  };
}])

AngularJS：＆＃39;不允许在转发器中复制。使用＆＃39;跟踪＆＃39;表达式以指定唯一键。＆＃34;

2 个答案: