AngularJS：ng-class 不使用布尔函数答案

【问题标题】：AngularJS: ng-class not working with boolean functionAngularJS：ng-class 不使用布尔函数
【发布时间】：2015-12-08 14:03:48
【问题描述】：

我正在尝试完成此操作：如果数组中存在列表元素，则更改按钮图标和颜色类。如果对象不存在，则图标将是 glyphicon-plus 和 btn-success Bootstrap 类。否则，将有一个 glyphicon-minus 和 btn-danger 类。 isSelected 函数返回一个布尔值，指示列表中是否存在对象。但是，每次我打开我的模态（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>

【问题讨论】：

如果您仍打算使用对象映射来应用类，则必须使用{ 'class': expr }。你离开了{}。

标签： javascript angularjs twitter-bootstrap angular-directive

【解决方案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"，因为在这两种情况下都使用了这些类。

【讨论】：

你忘了在 spans ng-class 上做同样的事情

【解决方案2】：

正如您如何使用 {} 包装 tr 元素的 ng-class 一样，您还需要为 button 和 span 元素使用 ng-class 属性。

<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)，而第一次将触发四次调用。

【讨论】：