Javascript Angular array.push（）为ng repeat创建一个副本

我有以下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>

因此，当页面启动时，控制器将向vm.contacts数组添加一个空对象

我的问题是：填充字段并单击“添加”按钮后，angular将复制上一个数组条目，而不是使用空对象创建数组条目

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

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

同一联系人将显示两次

如何防止这种情况发生

我尝试在

ng repeat

声明中使用

track by$index

，在addNew函数中使用

angular.copy（）

，但似乎没有任何效果。我希望能够添加一个新的空联系人，我不希望复制或复制一个

提前谢谢

类似这样：

查看

<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>

---

我认为问题出现在这里：

    <input type="text" ng-model="contact.firstName">
    <input type="text" ng-model="contact.lastName">

---

一旦阵列接收到第一个和最后一个联系人姓名，之后的输入只能是存储在contact中的第一个和最后一个姓名，因为第一个值存储在contact中，并且从那时起只能使用这些值。

@Vinas是否仍对您有帮助？因为我不知道使用

addNew（）

方法的目的是什么。不幸的是@daan.desmedt无效，我仍然得到了一个副本。Thjis是一种动态形式。您可以继续添加新联系人。一旦你点击“添加”按钮，它就会创建一个新的数组项并显示它的输入字段。。。你能为我创建一个JSFIDLE吗？这样我就能看到问题了？它在FIDLE上工作。不知道为什么它在项目中不起作用=P..Jea一定是某个代码将其添加到了两倍？从远处很难看到。。。除非你把你的项目发布到网上某个地方，我们可以查看。它不应该解释为

contact

在这个上下文中的意思是

vm.contacts[$index]

？？但是，我已尝试声明

ng model=“vm.contacts[$index].firstName”

，但它也不起作用。是否确实正在更新$index？我认为发生的事情是数组将输入的第一个值作为输入。例如，当您声明vm.addNew=addNew时；那么无论什么新增加的价值都将是第一个新增加的价值。对我来说这就是它的样子，但我不能在很大程度上理解你的代码。是的@liamguy165。我可以在循环时打印$index。它可以在小提琴上工作，但不能在我的项目上工作。对我来说有点神秘：/我想你回答的这个问题有一个线索@liamguy165。仔细观察发现，空对象被创建并推入数组中。仅在此之后，可能当模板使用新信息或其他内容呈现时，Angular会变得混乱，并用以前的行数据覆盖新创建的

input

元素。我遇到了一个类似的问题，通过使用Angular.copy（）解决了这个问题-我尝试以至少三种不同的方式使用Angular.copy（），但他无法阻止这种重复，凯尔说/请在原始帖子中添加一个链接到你当前代码的Plunkr，我有这个，但它在那里完全有效，这就是为什么我没有发布它。它只在我的项目上起不到作用，不幸的是我不能分享。但是，我不明白为什么它在这里失败，在那里工作，因为代码基本上是一样的。如果它在JSFIDLE中工作正常，那么您的问题是由于代码中的其他内容造成的。这就是为什么下面没有一个合理的解决方案能帮助你！

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


function MainController($timeout) {

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

  vm.addNew = addNew;

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

    <input type="text" ng-model="contact.firstName">
    <input type="text" ng-model="contact.lastName">