CODEWITHSUNDEEP
angularjs
Francisc
Francisc

Reputation: 80415

How to deal with dynamically added inputs with ngModel attribute on them

I have an app that creates input elements dynamically when a user clicks a button. It looks something like this:

[ input ] [+]

That input has an ng-model and I can use $compile when appending new inputs to have Angular treat them as if they were in the DOM at bootstrap time.

I can increment the ng-model value to say "item1", "item2" etc, but I don't like that.

I would like to know if there's a away to have an array that holds all values from all inputs.

Thanks.

Upvotes: 1

Views: 106

Answers (1)

Chickenrice
Chickenrice

Reputation: 5727

You could try this:

HTML

<div ng-controller="myCtrl">
  <button ng-click="addInputField()">add</button>
  <ul>
    <li ng-repeat="item in items">
        <input type="text" id="item{{input.id}}" ng-model="item[$index]"/>
    </li>
  </ul>
  data:
  <div ng-repeat="item in items">
    {{item}}
  </div>
</div>

CONTROLLER

angular.module('app',[])
.controller('myCtrl',function($scope){
  $scope.items = [];
  $scope.addInputField = function(){
    $scope.items.push({});
}
});

Here is the JSFiddle demo

'Items' is the data that binding to the input field list. You can maintain the view by updating the items array within scope and bind the elements of array to each input field view.

Hope this is helpful.

Upvotes: 1

Related Questions