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

Question

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.

You only need angular braces {{var}} if you're writing it out to the page. When using it in repeats or models or filters, you don't need the braces. Note you're already doing this in the ng-repeat, you didn't do "item in {{items}}". — James M
– James M, Commented Feb 21, 2013 at 19:41
Thank you for the advice James! I think I understood Angular a little bit better (I'm still new to it though :) ) — Sammy S.
– Sammy S., Commented Feb 21, 2013 at 21:50

pkozlowski.opensource · Accepted Answer · 2013-02-21 17:12:06Z

11

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

answered Feb 21, 2013 at 17:12

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

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

1 Comment

FlavorScape Over a year ago

this plnkr does not work. I clearly see the mustache value {{item.name}} is not getting updated.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related