javascript - UI Bootstrap radio button in ng-repeat - Stack Overflow

admin管理员组

文章数量:1225001

I am trying to do a set of radio buttons using ui bootstrap (/) pretty much the same that the example on their website, but using ng-repeat:

<div class="btn-group">
    <label ng-repeat='option in options' class="btn btn-danger" ng-model="radioModel2" btn-radio="'{{option}}'" uncheckable>{{option}}</label>
</div>

but for some reason it doesn't work when I use ng-repeat. Anyone knows why?

I've made a plunker to illustrate the problem:

Thanks!

I am trying to do a set of radio buttons using ui bootstrap (http://angular-ui.github.io/bootstrap/) pretty much the same that the example on their website, but using ng-repeat:

<div class="btn-group">
    <label ng-repeat='option in options' class="btn btn-danger" ng-model="radioModel2" btn-radio="'{{option}}'" uncheckable>{{option}}</label>
</div>

but for some reason it doesn't work when I use ng-repeat. Anyone knows why?

I've made a plunker to illustrate the problem: http://plnkr.co/edit/0sDgKoRhHOgfnIvBPmi4?p=preview

Thanks!

• javascript
• angularjs
• angular-ui-bootstrap

Share Improve this question Follow asked Dec 24, 2014 at 12:36 mario595mario595 3,76177 gold badges3737 silver badges5858 bronze badges 1

• checkout this. ng-repeat creates is new scope. So you need to create an object at parent controller to share result. – dhavalcengg Commented Dec 24, 2014 at 12:48

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 19

You are doing a little mistake with your ng-model. When you are going to pass it in radiobutton with repeat in you model you can use it like

<div class="btn-group">
    <label ng-repeat='option in options' class="btn btn-danger" ng-model="$parent.radioModel2" btn-radio="'{{option}}'" uncheckable>{{option}}</label>
</div>

Try this.

Check the link on plnkr

http://plnkr.co/edit/m24ZcYuttw6IuCBh02rQ?p=preview

From the Understanding Scopes angular.js wiki:

For each item/iteration, ng-repeat creates a new scope, which prototypically inherits from the parent scope, but it also assigns the item's value to a new property on the new child scope.

If item is a primitive (boolean, string, int, etc.), essentially a copy of the value is assigned to the new child scope property. Changing the child scope property's value does not change the array the parent scope references.

With italic are my comments.

However, things work differently when you have an object provided, because in this case only a reference to the original object is assigned to the child scope and not a copy.

Thus, you can make your example work by substituting your ng-model="radioModel2" with ng-model="data.radioModel2" and in your controller don't forget to create the object with $scope.data = {};

Here is a working fork of your plunker.

本文标签： javascriptUI Bootstrap radio button in ngrepeatStack Overflow