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

Hadi · Accepted Answer · 2016-03-25 06:00:58Z

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, 2016 at 6:00

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

durga siva kishore mopuru Over a year ago

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.

Hadi Over a year ago

this answer may be help you stackoverflow.com/questions/32470928/…

S Panfilov · Accepted Answer · 2016-03-25 07:19:31Z

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, 2016 at 7:19

answered Mar 25, 2016 at 6:00

S Panfilov

17.7k19 gold badges79 silver badges103 bronze badges

2 Comments

durga siva kishore mopuru Over a year ago

once check the jsFiddle , i placed ng-model="eachItem.value"

S Panfilov Over a year ago

@durgasivakishoremopuru tnx, update link to the fiddle

Dhanush Gopinath · Accepted Answer · 2016-03-25 06:00:49Z

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, 2016 at 6:00

Dhanush Gopinath

5,7697 gold badges41 silver badges68 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related