Setting and getting bootstrap radio button inside angular repeat loop

Question

I am trying to set the default button and get the current selected value. The example without the repeat loop works.

Here is my plnkr: http://plnkr.co/edit/t9CefA5bhLZs3RASmEUG?p=preview

It is based on this example: http://plnkr.co/edit/LFj4inY9TLYZs9z7yHCr?p=preview

Thank you!

pkozlowski.opensource · Accepted Answer · 2013-04-28 18:31:58Z

36

So, there were 2 things going on in your plunker.

Firstly the btn-radio attribute doesn't need interpolation ({{}}) you can (and should) provide an expression directly. So just write btn-radio="company.id" instead of btn-radio="{{company.id}}".

Secondly, you must know that the ng-repeat directive creates a new scope. This is a very, very common conceptual issue people have with AngularJS so I would encourage you to read https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance

Coming back to you particular problem you can either change you ng-model expression to point to a parent scope (ng-model="$parent.radioModel") or bind to an object property (ng-model="radioModel.id").

Here is a working plunk with the second approach: http://plnkr.co/edit/uGAxaRlPFK6sD4tRjGXX?p=preview

answered Apr 28, 2013 at 18:31

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

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

2 Comments

Misha Moroshko Over a year ago

Could you please explain the problem in this related question? stackoverflow.com/q/18275727/247243

etoxin Over a year ago

I never knew that ng-repeat directive creates a new scope. Wow.

Collectives™ on Stack Overflow

Setting and getting bootstrap radio button inside angular repeat loop

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related