AngularJS add/remove function with ng-repeat and ng-model

Question

I'm creating a form that has add/remove function. To achieve that, I tried to use ng-model in ng-repeat. Here's what my code looks like.

<button ng-click='add()'>Add more</button>
<div ng-repeat='x in array track by $index'>
    <input ng-model='array[$index].name'></input>
    <input ng-model='array[$index].phone'></input>
    <input ng-model='array[$index].email'></input>
</div>

//angular module
$scope.add = function () {
    $scope.array.push(item);
};

But then, all input field will be synchronized and all the item in the array looks the same, which is what I don't intend to. Also, I made a sample of my code in codepen.

Answer 1

So basically you're pushing a "item"-reference to the list every time, so you end up with a list of multiple references to one item.

You could do something like:

angular.module('myapp', [])
.controller('Ctrl', ['$scope', '$compile',function ($scope, $compile) {
  $scope.array = [];
  var item = {
    name: '',
    phone: '',
    email: '',
  };

  $scope.array.push(item);
  $scope.addItem = function () {

    $scope.array.push(
      {
        name : '',
        phone: '',
        email: '',        
      }    
    );

  };
}]);

Then it would work. A personal opinion to the html. Many people do ng-repeat like this for the sake of simplicity:

<div ng-repeat='x in array'>
    <input ng-model='x.name'></input>
    <input ng-model='x.phone'></input>
    <input ng-model='x.email'></input>
</div>

Answer 2

With every push of item you are pushing a reference to the same object. Thus when making changes in the input field, you are seeing the updates in all array nodes - they reference the same item.

The quick fix is to push a copy of item, instead of item itself in $scope.add():

$scope.array.push(angular.copy(item));

The better way is to have item as an object, which you can instantiate:

var Item = function (){
    return {
        name: '',
        phone: '',
        email: ''
    };
};

then

$scope.array.push(new Item());

Answer 3

Change your javascript to like this:

angular.module('myapp', [])
.controller('Ctrl', ['$scope', '$compile',function ($scope, $compile) {
  $scope.array = [];

  var item = {
    name: '',
    phone: '',
    email: '',
  };

  $scope.array.push(item);
  $scope.addItem = function () {
    item.name = $scope.name;
    item.phone = $scope.phone;
    item.email = $scope.email;
    $scope.array.push(item);
    $scope.name = "";
    $scope.phone = "";
    $scope.email = "";
  };
}]);

You will have to store each of the name, email and phone is separate models.

After that, when you add the item in your array make sure you reset them.

Also change the name of the model in the html.

Check here.