如何使Twitter Bootstrap按钮组与AngularJS一起使用？

Question

我正在尝试创建一个简单的twitter bootstrap按钮组 ，允许用户选择几个选项之一（想想单选按钮）。 我已经达到了影响模型变化的程度，但“活动”状态没有正确设置为onclick ...除非我再次点击它？ 我创造了一个小提琴 ，基本标记如下......

<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();
                };
            }
        };
    });

Answer 1

你不需要90％的bootstrap js来实现这样的工作你需要做的就是创建一个按钮组并附加一些ng-click和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>

Answer 2

这里有一些关于使您的按钮组作为单选按钮工作的其他信息。

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

使用该信息，我分叉你的小提琴，这似乎是有效的。

http://jsfiddle.net/puatj/

更改只是将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>

Answer 3

如果你不介意放弃一点时髦的引导样式，你可以通过简单地取出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>

你可以在这里找到JSFiddle。

Answer 4

从父div中省略data-toggle =“buttons”，并在设置属性width的输入中添加一个类或样式：0px和visibility：hidden。

要将按钮显示为活动按钮，请使用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>

Answer 5

我找到了直接从控制器中的数组处理它的角度方式。

<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>