CODEWITHSUNDEEP
javascriptangularjs
Sammy S.
Sammy S.

Reputation: 1290

Angular.js: two-way binding inside ng-repeat

I'm working on an Angular application.

I want to generate a form with an arbitrary number of text input fields with two-way bindings for every individual input field. No buttons, no watchers. ng-model is not working correctly because of the scoping (if I'm not mistaken). The input fields are generated from an array with ng-repeat like this:

 <div ng-repeat="item in items">
   <label>{{item.name}}</label>
   <input type="text" placeholder="{{item.default}}" ng-model="{{item.value}}"> <!-- this input should be bound -->
 </div>

I just want a simple binding to update the items array in the controller on changes in the input.

Any help appreciated.

Upvotes: 12

Views: 8501

Answers (1)

pkozlowski.opensource
pkozlowski.opensource

Reputation: 117370

Just change input tag so it reads:

<input type="text" placeholder="{{item.default}}" ng-model="item.value">

Notice ng-model without curly braces.

Working plunk: http://plnkr.co/edit/CLdem9yIw2Sk1U52Iajl?p=preview

Upvotes: 11

Related Questions