jQuery 如何使 Twitter Bootstrap 按钮组与 AngularJS 一起使用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19015056/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Twitter Bootstrap button groups work with AngularJS?
提问by Brian
I'm trying to create a simple twitter bootstrap button groupthat 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 fiddleand the basic markup follows...
我正在尝试创建一个简单的twitter bootstrap 按钮组，允许用户选择多个选项之一（想想单选按钮）。我已经到了影响模型更改的地步，但是在单击时未正确设置“活动”状态……除非我第二次单击它？我创建了一个小提琴，基本标记如下......
<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();
};
}
};
});
回答by btm1
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:
你不需要 90% 的 bootstrap js 来让这样的事情工作你需要做的就是创建一个按钮组并附加一些 ng-clicks 和 ng-class 到它：
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>
回答by Craig Squire
There is some additional info here on making your button group work as radio buttons.
这里有一些关于使您的按钮组作为单选按钮工作的附加信息。
http://getbootstrap.com/javascript/#buttons
http://getbootstrap.com/javascript/#buttons
Using that info, I forked your Fiddle and this appears to be working.
使用该信息，我分叉了您的 Fiddle，这似乎有效。
The change was just to switch your span element to a label/input.
更改只是将您的 span 元素切换到标签/输入。
<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>
回答by GrantByrne
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
如果你不介意放弃一些时髦的引导程序样式，你可以通过简单地取出 data-toggle 标签来解决这个问题
<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>
回答by user1824797
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.
从父 div 中删除 data-toggle="buttons" 并在输入中添加一个类或样式来设置属性宽度：0px 和可见性：隐藏。
To display the buttons as active, use ng-init, ng-click, and ng-class to toggle active classes.
要将按钮显示为活动的，请使用 ng-init、ng-click 和 ng-class 切换活动类。
<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>
回答by downhand
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>
