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>

is it what you want: $scope.items.push(angular.copy($scope.item));? — Dmitry Pavliv
– Dmitry Pavliv, Commented Jul 28, 2015 at 7:06
@ Ayush i want to create form dynamically.when type in input element add another input element. — Hadi
– Hadi, Commented Jul 28, 2015 at 7:12

Dmitry Pavliv · Accepted Answer · 2015-07-28 07:29:59Z

2

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>

edited Jul 28, 2015 at 7:29

answered Jul 28, 2015 at 7:12

Dmitry Pavliv

35.9k13 gold badges85 silver badges85 bronze badges

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

6 Comments

Hadi Over a year ago

how remove value when added new element?

Dmitry Pavliv Over a year ago

@hadi, I think this was descried in another tread - it has perfect explanation. Just add ng-click="remove(line)" and add remove behaviour in your controller

Hadi Over a year ago

when type in second input element it added new input element with first input element value. while i don't want this.

Dmitry Pavliv Over a year ago

change also first occurrence of $scope.items.push($scope.item); with $scope.items.push(angular.copy($scope.item));. See updated answer for details

Hadi Over a year ago

thanks. its work correctly but in console appear this error: Error: [ngModel:nonassign] errors.angularjs.org/1.3.14/ngModel/nonassign?

|

michelem · Accepted Answer · 2015-07-28 07:13:49Z

1

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>

answered Jul 28, 2015 at 7:13

michelem

14.6k5 gold badges55 silver badges67 bronze badges

2 Comments

Dmitry Pavliv Over a year ago

you forget to mention what it actually does: <div>{{items|json}}</div> - I don't think this is what OP wants

Vineet Over a year ago

OP should declare phone as an array. Like $scope.item = { phone: [] }; then your above code will work perfectly :-)

Kalhan · Accepted Answer · 2015-07-28 07:27:55Z

1

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>

edited Jul 28, 2015 at 7:27

answered Jul 28, 2015 at 7:12

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

4 Comments

Hadi Over a year ago

thanks. its work correctly but in console appear this error: Error: [ngModel:nonassign] errors.angularjs.org/1.3.14/ngModel/nonassign?

Kalhan Over a year ago

umm dont know what the exact error, in this demo there is no console errors :(

Hadi Over a year ago

@ K.Toress. ok. that is right and no error in console. thanks very much. your answer and simoco answer is correct and i don't know which accept :(

Kalhan Over a year ago

:D ha haa go with the one make sense to you :) no worries

Collectives™ on Stack Overflow

ng-model bind to element in ng-repeat Angularjs

3 Answers 3

6 Comments

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related