使用 AngularJS 将 Twitter Bootstrap 按钮状态更改为在按钮组中处于活动状态

Question

我正在尝试根据 "OrderBy" 的值将按钮的状态设置为活动状态，但没有结果，我已经尝试了 Whosebug 中的所有 Q/A。

    <div class="btn-group col-md-offset-5" style="right: 12px !important;">
        <label class="btn btn-default" ng-class="'active':orderProp=='name'">
            <input type="radio" name="color" data-ng-model="orderProp" value="name"> Alphabetical
        </label>
        <label class="btn btn-default" ng-class="'active':orderProp=='price'">
            <input type="radio" name="color" data-ng-model="orderProp" value="price"> Price
        </label>
        <label class="btn btn-default" ng-class="'active':orderProp=='calorie'">
            <input type="radio" name="color" data-ng-model="orderProp" value="calorie"> Calorie
        </label>{{orderProp}}
    </div>

orderProp 的值正在相应变化，但不知道为什么没有应用活动 class。谢谢

Answer 1

ng-class 接受一个 json 字符串作为参数。

试试这个 - ng-class="{'active':orderProp=='name'}"

Answer 2

试试这个ng-class = "{'active' : (orderProp=='name')}"

该指令以三种不同的方式运行，具体取决于表达式计算为三种类型中的哪一种：

如果表达式的计算结果为字符串，则该字符串应该是一个或多个 space 分隔的 class 名称。

如果表达式的计算结果为对象，则对于具有真值的对象的每个键值对，对应的键将用作 class 名称。

如果表达式的计算结果为数组，则数组的每个元素都应该是类型 1 中的字符串或类型 2 中的对象。这意味着您可以在数组中将字符串和对象混合在一起以提供您可以更好地控制 CSS class 出现的内容。

使用 AngularJS 将 Twitter Bootstrap 按钮状态更改为在按钮组中处于活动状态

Change Twitter Bootstrap button status to active in Button Group with AngularJS

twitter-bootstrap

angularjs

twitter-bootstrap-3