How to repeat duplicate objects using ng-repeat in AngularJs?

Question

This is my code.

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

This is my 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>

when i click add button push one more object into $scope.data array like

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

In the above i got an error

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 have duplicate objects after adding. because i want to repeat label names using ng-repeat in angularjs.First i have output like this

OutPut:-

name   textbox
email  textbox

After add button click Output:-

name   textbox
email  textbox
name   textbox

score 4 · Accepted Answer · answered Mar 25 '16 at 06:00

4

use track by $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>

answered Mar 25 '16 at 06:00

Hadi J

16,989
4
36
62

Thank You @hadiJZ. I Have data Like this $scope.data=[{"label":"name","type":"textbox"},{"label":"name","type":"textbox"}]; when i enter data in first textbox and also effected in second textbox. i use ng-model in textbox . So How to differentiate these two textboxes. – durga siva kishore mopuru Mar 25 '16 at 06:26
this answer may be help you http://stackoverflow.com/questions/32470928/angular-formly-adding-form-fields-dynamically-on-user-click/35603088#35603088 – Hadi J Mar 25 '16 at 06:31

S Panfilov · Answer 2 · 2016-03-25T07:19:31.633

3

Use track by for this 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>

You also able to use track by with your custom filed, like id, or whatever

Important: It's better to use track by in each ng-repeat, cause it's improve ng-repeat's performance (read more).

But avoid to use track by in ng-options and other cases when you use select as .. for ... construction (read more)

JsFiddle here

edited Mar 25 '16 at 07:19

answered Mar 25 '16 at 06:00

S Panfilov

16,641
17
74
96

once check the jsFiddle , i placed ng-model="eachItem.value" – durga siva kishore mopuru Mar 25 '16 at 07:08
@durgasivakishoremopuru tnx, update link to the fiddle – S Panfilov Mar 25 '16 at 07:20

score 2 · Answer 3 · answered Mar 25 '16 at 06:00

2

You have to ensure that items in the array have an unique key. If that is not possible you can use track by $index in the ng-repeat.

Check the details here

answered Mar 25 '16 at 06:00

Dhanush Gopinath

5,652
6
37
68

How to repeat duplicate objects using ng-repeat in AngularJs?

3 Answers3