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();
};
}
};
});
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With