How to make Twitter Bootstrap button groups work with AngularJS?

Question

I'm trying to create a simple twitter bootstrap button group that allows the user to select one of several options (think radio buttons). I've got it to a point where it's affecting changes on the model, but the "active" state is not properly being set onclick...unless I click it a second time?? I've created a fiddle and the basic markup follows...

<div range="justified"
    model="myModel"
    options="rangeOptions"></div>
<hr/>
<div range="vertical"
    model="myModel"
    options="rangeOptions"></div>
<hr/>

<pre>myModel:{{myModel}}</pre>

<script type="text/ng-template" id="range.tpl.html">
    <div class="btn-group btn-group-{{type}}" data-toggle="buttons">
        <span class="btn btn-lg btn-primary"
            ng-repeat="option in options"
            ng-class="{active:option.id==model.range_id}" <!-- not working?? -->
            ng-click="activate(option.id)">{{option.label}}</span>
    </div>
</script>

function Main($scope) {
    $scope.rangeOptions = [
        {id:1,label:"Agree"},
        {id:2,label:"Neutral"},
        {id:3,label:"Disagree"}
    ];
    $scope.myModel = {range_id: 2};
}
angular
    .module('range', [])
    .directive('range', function () {
        return {
            replace: true,
            scope: { type:'@range', model:'=', options:'=' },
            templateUrl:'range.tpl.html',
            controller: function ($scope,$element,$attrs) {
                $scope.activate = function (option) {
                    $event.preventDefault();
                };
            }
        };
    });

this is something you need to look at: angular-ui.github.io/bootstrap/#/buttons — bingjie2680
– bingjie2680, Commented Sep 25, 2013 at 20:59

btm1 · Accepted Answer · 2013-09-26 07:44:50Z

27

You don't need 90% bootstrap js to get things like this to work all you need to do is make a button group and attach some ng-clicks to it and ng-class to it:

function myscope($scope) {
  $scope.button = 'red';
}

<div class="btn-group">
    <a href="javascript:void(0)" ng-click="button = 'red'" ng-class="{ 'active' : button == 'red' }" class="btn">red</a>
    <a href="javascript:void(0)" ng-click="button = 'blue'" ng-class="{ 'active' : button == 'blue' }" class="btn">blue</a>
    <a href="javascript:void(0)" ng-click="button = 'green'" ng-class="{ 'active' : button == 'green' }" class="btn">green</a>
</div>

answered Sep 26, 2013 at 7:44

btm1

3,8562 gold badges25 silver badges26 bronze badges

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

3 Comments

Brian Over a year ago

Yeah, seems I was over thinking it a bit ;) Thanks!

mildog8 Over a year ago

Pure swag -> <div class="btn-group" ng-init="button = 'red'"> insteda dis -> function myscope($scope) {$scope.button = 'red';}

btm1 Over a year ago

@AndrewM correct you could do ^ but some would argue best practice is to keep application logic out of the DOM as much as humanly possible. My rule of thumb is: Put it in the controller if you can. That way you're not having to crawl through templates to change it someday. So a better solution would be to have ng-init call a function that changes the prop.

Craig Squire · Accepted Answer · 2013-09-25 21:29:39Z

8

There is some additional info here on making your button group work as radio buttons.

http://getbootstrap.com/javascript/#buttons

Using that info, I forked your Fiddle and this appears to be working.

http://jsfiddle.net/puatj/

The change was just to switch your span element to a label/input.

<div class="btn-group btn-group-{{type}}" data-toggle="buttons">
    <label class="btn btn-lg btn-primary"
        ng-repeat="option in options"
        ng-class="{active:option.id==model.range_id}"
    ng-click="activate(option.id)"><input type="radio"></input>{{option.label}}</label>
</div>

answered Sep 25, 2013 at 21:29

Craig Squire

2,14114 silver badges13 bronze badges

Comments

GrantByrne · Accepted Answer · 2013-11-02 20:46:01Z

4

If you don't mind giving up a little bit of the snazzy bootstrap styling, you can fix this by simply taking out the data-toggle tag

<div ng-app>
<h1>{{color}}</h1>
<form>
    <div>
        <label>Select a Color</label>
    </div>
    <div class="btn-group">
        <label class="btn btn-primary">
            <input type="radio" name="color" data-ng-model="color" value="'red'"> Red
        </label>
            <label class="btn btn-primary">
        <input type="radio" name="color" data-ng-model="color" value="'green'"> Green
            </label>
        <label class="btn btn-primary">
            <input type="radio" name="color" data-ng-model="color" value="'blue'"> Blue
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="color" data-ng-model="color" value="'black'"> Black
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="color" data-ng-model="color" value="'orange'"> Orange
        </label>
    </div>
</form>
</div>

You can find the JSFiddle here.

answered Nov 2, 2013 at 20:46

GrantByrne

89711 silver badges23 bronze badges

1 Comment

Brett Mathe Over a year ago

I'm trying to do the same thing but want the SNAZZ! Has anyone figured out how to get AngularJS to work with the toggle buttons?

user1824797 · Accepted Answer · 2015-07-31 15:32:05Z

Leave out data-toggle="buttons" from the parent div and add a class or style in the inputs that set the properties width: 0px and visibility: hidden.

To display the buttons as active, use ng-init, ng-click, and ng-class to toggle active classes.

<label>Location</label><br/>
<div class="btn-group" ng-init="selectedButton = 'all'">
            <label class="btn btn-default active" ng-class="{'active':selectedButton === 'all'}" ng-click="selectedButton = 'all'">
               <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="all" ng-model="filterData.locations" checked style="visibility:hidden; width:0px;" > All Locations
            </label>
            <label class="btn btn-default" ng-class="{'active':selectedButton === 'boroughs'}" ng-click="selectedButton = 'boroughs'">
               <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="boroughs" ng-model="filterData.locations" style="visibility:hidden; width:0px;" > Boroughs
            </label>
            <label class="btn btn-default" ng-class="{'active':selectedButton === 'depots'}" ng-click="selectedButton = 'depots'">
               <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="depots" ng-model="filterData.locations" style="visibility:hidden; width:0px;" > Depots
            </label>
</div>

downhand · Accepted Answer · 2015-01-22 13:33:37Z

0

I found the angular way of handling this, directly from an array in your controller.

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-tertiary" ng-class="{active: availableOption === searchFieldsContent.searchOption}" ng-repeat="availableOption in searchOptions">
        <input type="radio" name="searchOption" id="searchOption{{$index}}" ng-model="searchFieldsContent.searchOption" ng-value="availableOption">{{availableOption.name}}</input>
    </label>
</div>

answered Jan 22, 2015 at 13:33

downhand

3951 gold badge9 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to make Twitter Bootstrap button groups work with AngularJS?

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related