Question

我试图完成此任务：如果列表元素存在于阵列上，则更改按钮图标和颜色类。如果该对象不存在，则该图标将为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>

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与{}包裹起来一样，您还需要使用ng-class属性来button 1}}和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>

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

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

2 个答案: