javascript - Angular array.push() 为 ng-repeat 创建一个副本

Question

我有以下 HTML:

<div ng-repeat="contact in vm.contacts">
    <input type="text" ng-model="contact.firstName">
    <input type="text" ng-model="contact.lastName">
    <button ng-click="vm.addNew()">add</button>
</div>

以及我的 Angular Controller 上的以下代码:

vm.contacts = [];

vm.addNew = addNew;

init();

function init() {
    addNew();
}

function addNew() {
    vm.contacts.push({});
}

因此，当页面启动时， Controller 向 vm.contacts 数组添加一个空对象。

我的问题是:一旦我填写了字段并单击添加按钮，angular 并没有创建一个带有空对象的数组条目，而是复制了之前的数组条目。

因此，如果我输入“John”作为名字，“Smith”作为姓氏，然后单击添加按钮，生成的数组将是:

[
    {firstName: "John", lastName: "Smith"},
    {firstName: "John", lastName: "Smith"}
]

并且同一个联系人会显示两次。

如何防止这种情况发生？

我试过在 ng-repeat 声明中使用 track by $index，在addNew 功能，但似乎没有任何效果。我希望能够添加一个新的空联系人，我不想复制或复制一个。

提前致谢!

Answer 1

像这样:

查看

<div ng-app="app" ng-controller="MainController as vm">

  {{vm.contacts}}

  <div ng-repeat="contact in vm.contacts">
    <input type="text" ng-model="contact.firstName">
    <input type="text" ng-model="contact.lastName">
    <button ng-click="vm.addNew()">add</button>
  </div>

</div>

控制者

angular
  .module('app', [])
  .controller('MainController', MainController)


function MainController($timeout) {

  var vm = this;
  vm.contacts = [{}];

  vm.addNew = addNew;

  function addNew() {
      vm.contacts.push({});
  }    
}

JSFIDDLE