ng-model bind to element in ng-repeat Angularjs

Question

How bind ng-model to element inside ng-repeat? In fact i want to bind object in array to element and when type in input element create new input element with new ng-model. while in this example all ng-model are same.

 var myApp = angular.module('app', []); myApp.controller("MyCtrl",function($scope){ $scope.items = []; $scope.item = { phone:"" }; $scope.items.push($scope.item); $scope.addItem = function(index){ if($scope.items[index+1] == null) $scope.items.push($scope.item); console.log($scope.items); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="MyCtrl"> <div ng-repeat="line in items track by $index"> <!-- typing here should auto update it's preview above --> <input ng-model="line.phone" ng-keydown="addItem($index)"/> <!-- many other fields here that will also affect the preview --> </div> </div> 

Answer 1

I think you want this one. Note that I use

$scope.items.push(angular.copy($scope.item))

to make a copy of object. Without this you always put reference to same object in array, so changing one of them causes others to be changed as well.

 var myApp = angular.module('app', []); myApp.controller("MyCtrl",function($scope){ $scope.items = []; $scope.item = { phone:"" }; $scope.items.push(angular.copy($scope.item)); $scope.addItem = function(index){ if($scope.items[index+1] == null) $scope.items.push(angular.copy($scope.item)); console.log($scope.items); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="MyCtrl"> <div ng-repeat="line in items track by $index"> <!-- typing here should auto update it's preview above --> <input ng-model="line.phone" ng-keydown="addItem($index)"/> <!-- many other fields here that will also affect the preview --> </div> </div> 

Answer 2

If you pass like $scope.items.push($scope.item); then $scope.item is reference to the same object and it will push to the array multiple times, because objects are referenced types, if you push primitive data types it will act differently,

define the item local in the function,

$scope.addItem = function(index){
        if($scope.items[index+1] == null) {
            var item = {
                 phone:""
            };
        }
        $scope.items.push(item );
        console.log($scope.items);
  }

 var myApp = angular.module('app', []); myApp.controller("MyCtrl",function($scope){ $scope.items = []; var item = { phone:"" }; $scope.items.push(item); $scope.addItem = function(index){ if($scope.items[index+1] == null) { var item = { phone:"" }; $scope.items.push(item ); console.log($scope.items); } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="MyCtrl"> <div ng-repeat="line in items track by $index"> <!-- typing here should auto update it's preview above --> <input ng-model="line.phone" ng-keydown="addItem($index)"/> <!-- many other fields here that will also affect the preview --> </div> </div> 

Answer 3

You can also use the key as array key of the model

<div ng-repeat="(key, line) in items track by $index">
  <input ng-model="line.phone[key]" ng-keydown="addItem($index)"/>
</div>