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

Posted 2023-05-08

【中文标题】如何使 Twitter Bootstrap 按钮组与 AngularJS 一起工作？

【英文标题】：How to make Twitter Bootstrap button groups work with AngularJS?

【发布时间】：2013-10-01 15:26:33

【问题描述】：

我正在尝试创建一个简单的twitter bootstrap button group，它允许用户选择多个选项之一（想想单选按钮）。我已经达到了影响模型更改的程度，但是单击时未正确设置“活动”状态……除非我再次单击它？ I've created a fiddle 基本标记如下...

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

【问题讨论】：

这是你需要看的东西：angular-ui.github.io/bootstrap/#/buttons

【参考方案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>

【讨论】：

是的，我好像有点想多了；）谢谢！

纯赃物 -> <div class="btn-group" ng-init="button = 'red'"> insteda dis -> function myscope($scope) $scope.button = 'red';

@AndrewM 正确，您可以这样做 ^ 但有些人认为最佳实践是尽可能将应用程序逻辑排除在 DOM 之外。我的经验法则是：如果可以，将其放入控制器中。这样一来，您就不必在某天翻阅模板来更改它。因此，更好的解决方案是让 ng-init 调用一个更改 prop 的函数。

@btm1 谢谢。会注意的！

【参考方案2】：

这里有一些关于使您的按钮组用作单选按钮的附加信息。

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

使用该信息，我分叉了您的 Fiddle，这似乎可以正常工作。

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>

【参考方案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>

You can find the JSFiddle here.

【讨论】：

我正在尝试做同样的事情，但想要 SNAZZ！有没有人想出如何让 AngularJS 使用切换按钮？

【参考方案4】：

从父 div 中去掉 data-toggle="buttons" 并在输入中添加一个类或样式来设置属性宽度：0px 和可见性：隐藏。

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

【参考方案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>