Angular array.push() creates a duplicate for ng-repeat

Question

I have the follow 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>

and the following code on my Angular controller:

vm.contacts = [];

vm.addNew = addNew;

init();

function init() {
    addNew();
}

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

So, when the page is started, the controller adds an empty object to the vm.contacts array.

My problem is: once I fill the fields and click on the add button, instead of creating an array entry with an empty object, angular is duplicating the previuous array entry.

So, if I enter "John" for first name and "Smith" for last name, and then click on the add button, the resulting array will be:

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

And the same contact will be displayed twice.

How do I prevent this from happening?

I've tried both to use track by $index on the ng-repeat declaration, and angular.copy() on the addNew function, and nothing seems to work. I want to be able to add a new empty contact, I do not wish to replicate or duplicate one.

Thanks in advance!

I've had a similar issue that was resolved by using angular.copy() - documentation link — Kyle
– Kyle, Commented Jun 15, 2017 at 14:06
I have tried to use angular.copy() in at least three different ways, but was unable prevent the repetition, @Kyle. :/ — Vinas
– Vinas, Commented Jun 15, 2017 at 14:09
Please add a link to the Plunkr of your current code in the original post — Kyle
– Kyle, Commented Jun 15, 2017 at 14:12
I have this fiddle, but it totally works over there, that's why I didn't post it. It fails to work only on my project, which I unfortunately can't share. However, I can't see why it fails here and works there, as the code is basically the same. — Vinas
– Vinas, Commented Jun 15, 2017 at 14:17
If it's working fine in the jsfiddle then your issue is due to something else in your code. That's why none of the reasonable solutions below are helping you! — Kyle
– Kyle, Commented Jun 15, 2017 at 14:21

daan.desmedt · Accepted Answer · 2017-06-15 13:21:54Z

2

Something like this:

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

answered Jun 15, 2017 at 13:21

daan.desmedt

3,8201 gold badge22 silver badges33 bronze badges

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

11 Comments

daan.desmedt Over a year ago

@Vinas Does still help you? Because I don't know what the intention is with the addNew() method.

Vinas Over a year ago

Unfortunately it didn't work @daan.desmedt, I still get a duplicate. Thjis is a dynamic form. You can keep adding new contacts. Once you click on the add button, it should create a new array Item and its input fields should be displayed.

daan.desmedt Over a year ago

Uh... Can you create a JSFiddle for me please - so i can see the problem?

Vinas Over a year ago

It works on fiddle. Don't know why it's not working on the project =P. FIDDLE.

daan.desmedt Over a year ago

Jea must be some code adding it double? Hard to see from a distance ... Unless if you post your project somewhere online where we can check.

|

liamguy165 · Accepted Answer · 2017-06-15 13:26:18Z

0

I think the problem arises here:

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

Once the array receives the first and last contact names, the input after that can only be the first and last name stored in contact as the first values are being stored in contact and from there on can only use those values.

answered Jun 15, 2017 at 13:26

liamguy165

523 bronze badges

4 Comments

Vinas Over a year ago

Shouldn't it interpretate that contact in this context means vm.contacts[$index]?? However, I've tried declaring ng-model="vm.contacts[$index].firstName" and it didn't work either.

liamguy165 Over a year ago

Are you sure $index is being updated? I think what is happening is somewhere the array is taking the first value entered as the input. For example, when you declare vm.addNew = addNew; then whatever new value added is going to be the first new value added. That's what it looks like to me but I can't follow your code to a great extent.

Vinas Over a year ago

Yes @liamguy165. I can print the $index fine while looping. It works on fiddle, it's jsut not working on my project. Kind of a mystery to me :/

Vinas Over a year ago

I think there's a clue to what's happening in this what you answered @liamguy165. A closer look revealed that the empty object is created and pushed into the array alright. Only after that, probably when the template is rendered with the new info or something, Angular is getting confused and overwriting the newly created input elements with the previous's row data.

Collectives™ on Stack Overflow

Angular array.push() creates a duplicate for ng-repeat

2 Answers 2

11 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related