Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 449
Sammy S. Avatar asked Feb 21 '13 16:02

Sammy S.


1 Answers

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

like image 76
pkozlowski.opensource Avatar answered Nov 15 '22 22:11

pkozlowski.opensource