Question

我正在尝试根据“OrderBy”的值将按钮的状态设置为活动而没有结果，我已经尝试了stackoverflow中的所有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的值正在相应地改变，但不知道为什么没有应用活动类。感谢

Answer 1

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

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

如果表达式求值为字符串，则字符串应为一个或多个以空格分隔的类名。

如果表达式求值为一个对象，则对于具有truthy值的对象的每个键值对，相应的键将用作类名。

如果表达式求值为数组，则数组的每个元素应该是类型1中的字符串或类型2中的对象。这意味着您可以将数组中的字符串和对象混合在一起以提供更多控制什么CSS类出现。

Answer 2

ng-class将json字符串作为参数。

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

使用AngularJS将Twitter Bootstrap按钮状态更改为在Button Group中激活

2 个答案: