javascript - AngularJS:ng-class 不适用于 bool 函数

Question

我正在尝试实现此目的:如果数组中存在列表元素，则更改按钮图标和颜色类别。如果该对象不存在，则图标将是带有 btn-success Bootstrap 类的 glyphicon-plus。否则，将会出现一个带有 btn-danger 类的 glyphicon-minus 。 isSelected 函数返回一个 bool 值，指示列表中是否存在该对象。但是，每次我打开模式 (Angular-UI-Bootstrap) 时，isSelected 都会出现解析错误。

如何在 ng-class 指令中正确设置 bool 函数？

<tbody>
    <tr ng-repeat="ex in exams track by ex.uid" ng-class="{selected: ex.uid === selectedExam.uid}" ng-click="rowclick(ex)" ng-dblclick="pushToRemoveFromSelectedList(ex)">
        <td>{{ ex.description }}</td>
        <td>{{ ex.date }}</td>
        <td>{{ ex.code }}</td>
        <td class="hidden-sm hidden-xs">{{ ex.class }}</td>
        <td>
            <button type="button" ng-class="'btn btn-sm btn-success':!isSelected(ex), 'btn btn-sm btn-danger':isSelected(ex)" ng-click="pushToRemoveFromSelectedList(ex)">
                <span ng-class="'glyphicon glyphicon-plus':!isSelected(ex), 'glyphicon glyphicon-minus':isSelected(ex)"></span>
            </button>
        </td>
    </tr>
</tbody>

Answer 1

您需要将属性值封装在 {} 中。

试试这个:

<button type="button"
        class="btn btn-sm"
        ng-class="'{ btn-success':!isSelected(ex), 'btn-danger':isSelected(ex) }"
        ng-click="pushToRemoveFromSelectedList(ex)">
    <span class="glyphicon"
          ng-class="{ 'glyphicon-plus':!isSelected(ex), 'glyphicon-minus':isSelected(ex) }"></span>
</button>

我将 class="btn btn-sm" 分离出来，因为在这两种情况下都使用了这些类。