Binding an Angular boolean to a Bootstrap Radio Button Group

Question

I have a model like this:

$scope.user = { is_active: true }

I'm currently displaying that in my template like this:

<form class="form-horizontal">
    <!-- ... -->
    <div class="form-group">
       <label class="col-sm-2 control-label">Is Active</label>

       <div class="btn-group col-sm-5" data-toggle="buttons">
           <label class="btn btn-default">
               <input type="radio" ng-selected="{{ user.is_active }}" name="is_active">
               Active
           </label>
           <label class="btn btn-default">
               <input type="radio" ng-selected="{{ user.is_active }}" name="is_active">
               Inactive
           </label>
       </div>
</form>

This looks like this in practice:

How can I bind the value of {{ user.is_active }} to this button group in Bootstrap? I'd like the correct button to be depressed based on what's selected in the model.

problem lies with running code that manipulates the DOM before angular does. If you remove boostrap script it works fine. Libraries that self intialize DOM manipulation really shouldn't be run on top of angular, rather run through directives within angular so angular can do the manipulation first. Opposite can mean loss of functionality/data binding if an element gets replaced without using $compile — charlietfl
– charlietfl, Commented Dec 27, 2013 at 2:01
for the buttons they work without script as far as I can tell just by using ng-class jsfiddle.net/YLKFk/4 Note I removed bootstrap.js from external resources — charlietfl
– charlietfl, Commented Dec 27, 2013 at 2:17

KayakDave · Accepted Answer · 2013-12-27 02:16:48Z

4

You may also want to look at the buttons in Angular's bootstrap ui- these are designed to work cleanly with Angular and so they use ngModel directly.

If you go this route you'll need to use ngModel by adding it to your buttons like this:

<input type="radio" ng-model="user.is_active" name="is_active">

Sticking with the default Twitter Bootstrap- it uses the class active to define which label is active. To set this you can use ngClass. For instance on the label you want active when is_active is true you'll want this:

ng-class="{active:user.is_active==true}

And to control the value you'll need to use 'ngClick' on the label to toggle the value.

<label class="btn btn-default"  ng-class="{active:user.is_active==true}" ng-click="setActive(true)">
    <input type="radio">
        Active
</label>
<label class="btn btn-default" ng-class="{active:user.is_active==false}" ng-click="setActive(false)">
     <input type="radio">
         Inactive
 </label>

And the new function:

$scope.setActive = function(val) {
    $scope.user.is_active= val;
};

demo fiddle

edited Dec 27, 2013 at 2:16

answered Dec 27, 2013 at 0:17

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

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

7 Comments

KayakDave Over a year ago

@Rob I just updated the fiddle with twitter bootstrap and it works- could you post a demo of the problem you're seeing?

Naftuli Kay Over a year ago

Yeah, I don't see any Bootstrap styling in your fiddle.

Naftuli Kay Over a year ago

Here's my update, which isn't working but has jQuery, Angular, and Bootstrap properly included: jsfiddle.net/YLKFk/2

Rob Over a year ago

I see you added the url to the css section, but the styles are not applied. The styling should look similar to the Naftuli original post.

KayakDave Over a year ago

Interesting... Looks like bootstrap needs it's own active class set. I updated the answer

|

Collectives™ on Stack Overflow

Binding an Angular boolean to a Bootstrap Radio Button Group

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related