Wie wiederhole ich doppelte Objekte mit ng-repeat in AngularJs?

Question

Das ist mein Code.

$scope.data=[]; 
$scope.data=[{"label":"name","type":"string"},{"label":"email","type":"string"}]; 
$scope.addFields = function (field) { 
    $scope.data.push(field); 
    }; 

Das ist mein html: -

<div ng-repeat="eachItem in data"> 
<input type="button" value="add" ng-click="addFields(eachItem)"/> 
    <label>{{eachItem.label}}</label> 
    <input type="text" ng-model="fieldValue"/> 
</div> 

, wenn ich ein hinzufügen klicken Tastendruck mehr Objekt in $scope.data Array wie

$scope.data=[{"label":"name","type":"string"},{"label":"email","type":"string"},{"label":"name","type":"string"}]; 

In der obigen i einen Fehler bekam

angular.min.js:102 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.3.14/ngRepeat/dupes?p0=nestedField%20in%20fie…%2C%22type%22%3A%22string%22%2C%22%24%24hashKey%22%3A%22object%3A355%22%7D 
at Error (native) 

I Habe nach dem Hinzufügen doppelte Objekte. Ich habe eine Ausgabe wie dieser

OutPut, weil ich Label Namen ng-Repeat in angularjs.First wiederholen möchte: -

name textbox 
email textbox 

Nach Schaltfläche Hinzufügen klicken Ausgang: -

name textbox 
email textbox 
name textbox 

Answer 1

Verwendung Spur von $ index

var app = angular.module("app",[]) 
 
app.controller('ctrl',['$scope', function($scope){ 
 
     $scope.data=[]; 
 
$scope.data=[{"label":"name","type":"string"},{"label":"email","type":"string"}]; 
 
$scope.addFields = function (field) { 
 
    $scope.data.push(field); 
 
    }; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<div class="item item-checkbox"> 
 
    <div ng-repeat="eachItem in data track by $index"> 
 
<input type="button" value="add" ng-click="addFields(eachItem)"/> 
 
    <label>{{eachItem.label}}</label> 
 
    <input type="text" /> 
 
</div>  
 
</div>

Answer 2

Verwenden track by dazu purpose.

<div ng-repeat="eachItem in data track by $index"> 
<input type="button" value="add" ng-click="addFields(eachItem)"/> 
    <label>{{eachItem.label}}</label> 
    <input type="text" ng-model="eachItem.value" /> 
</div> 

Sie können auch track by mit Ihrer Gewohnheit abgelegt verwenden, wie id, oder was auch immer

Wichtige: Es ist besser track by in jedem ng-repeat zu verwenden, weil es ng-repeat die Leistung (read more) ist zu verbessern .

Aber vermeiden track by in ng-options und anderen Fällen verwenden, wenn Sie select as .. for ... Bau (read more)

JsFiddle here

Answer 3

Sie müssen sicherstellen, dass verwenden Elemente im Array haben einen eindeutigen Schlüssel. Wenn das nicht möglich ist, können Sie track by $index in der ng-Wiederholung verwenden.

Überprüfen Sie die Details here