Angular Array.push() erzeugt ein Duplikat für ng-repeat

Question

ich die folgen HTML haben:

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

und den folgenden Code auf meinem Winkelregler:

vm.contacts = []; 

vm.addNew = addNew; 

init(); 

function init() { 
    addNew(); 
} 

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

Also, wenn die Seite gestartet wird, fügt der Controller dem Array vm.contacts ein leeres Objekt hinzu.

Mein Problem ist: sobald ich die Felder fülle und auf die Schaltfläche Hinzufügen klicke, statt einen Array-Eintrag mit einem leeren Objekt zu erstellen, verdoppelt eckig den vorherigen Array-Eintrag.

Also, wenn ich „John“ für Vornamen und „Smith“ für Nachnamen ein, und klicken Sie dann auf die Schaltfläche Hinzufügen, wird das resultierende Array sein:

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

Und das gleiche Kontakt wird zweimal angezeigt.

Wie verhindere ich dies?

Ich habe versucht, beide track by $index auf die ng-repeat Deklaration und angular.copy() auf die Funktion addNew zu verwenden, und nichts scheint zu funktionieren. Ich möchte in der Lage sein, einen neuen leeren Kontakt hinzuzufügen, den ich nicht replizieren oder duplizieren möchte.

Vielen Dank im Voraus!

Answer 1

Etwas wie folgt aus:

VIEW

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

CONTROLLER

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


function MainController($timeout) { 

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

    vm.addNew = addNew; 

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

JSFIDDLE

Answer 2

denke ich, das Problem hier entsteht :

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

Sobald das Array der ersten und letzte Kontaktnamen empfängt, kann der Eingang nach dass nur der erste und Nachname in Kontakt gespeichert werden, wie die ersten Werte werden in Kontakt gespeichert werden und von dort kann auf nur verwenden diese Werte.