AngularJS: ng-class 不适用于布尔函数

Question

我正在尝试完成此操作：如果数组中存在列表元素，则更改按钮图标和颜色 class。如果对象不存在，图标将是 glyphicon-plus 和 btn-success Bootstrap class。否则，就会出现glyphicon-minus和btn-dangerclass。 isSelected 函数 returns 一个布尔值，表示列表中是否存在对象。但是，每次我打开我的模态（Angular-UI-Bootstrap）时，都会出现来自 isSelected.

的解析错误

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

<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" 分开了，因为类在这两种情况下都用到了。

Answer 2

就像用 {} 包装 tr 元素的 ng-class 一样，您还需要对 button 和 span 个元素。

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

或者，您可以选择使用三元运算符在两个类之间切换。

<button type="button"
  class="btn btn-sm"
  ng-class="isSelected(ex)? 'btn-danger': 'btn-success'"
  ng-click="pushToRemoveFromSelectedList(ex)">

  <span class="glyphicon"
    ng-class="isSelected(ex)? 'glyphicon-minus': 'glyphicon-plus'">
  </span>

</button>

此替代方案的一个优点是每个 ng-repeat 项目只需要调用 isSelected(ex) 两次，而第一个将触发四次调用。

AngularJS: ng-class 不适用于布尔函数

AngularJS: ng-class not working with boolean function

javascript

twitter-bootstrap

angularjs

angular-directive