Question

我有一个在控制器中设置了类的数组（必须是这样的，它是从页面的元模板中读取的）。我还想将一个条件类应用于同一个元素。有可能吗？

编辑，更多信息：我的html元素包含源自两个源的类 - 一个是由控制器创建的一组类（它们由我的代码之外的服务提供，我不能在它们中硬编码视图）。另一个来源是条件的输出（例如：如果“$ scope.activeElement === name_of_this_element，添加'活动'类）。
在ng-class指令中，我不能对未指定的类列表（第一个源）使用对象表示法，我必须对条件类使用对象表示法。

编辑：找到了解决方案（见下文）。

Answer 1

另一种选择是以这种方式编写ng-class

<div ng-class="[item.class, item.errorClass, item.locked ? 'locked-item' : '']"></div>

Answer 2

我找到了一个解决方案 - 我将“固定”类放在常规类属性中（首先将该字符串转换为数组）和ng-class对象中的条件属性，如下所示：

<td ng-repeat="cell in row.cells" class="{{cell.cssClass}}" ng-class="{active: condition}">

Answer 3

您存储类名称数组的事实与此无关。

HTML

<div ng-class="arrOfClasses[condition]"></div>

角

app.controller('myCtrl', function($scope) {
    $scope.arrOfClasses = ['class1', 'class2', 'class3'];

    $scope.condition = 1; // what ever number here
});

Answer 4

一个好的方法，也是为了避免在类中使用{{}}，只需要一个表达式：

<td ng-repeat="cell in row.cells" ng-class="(condition ? 'active ' : '') + cell.cssClass">

Angular ng-class：组合枚举（数组）类和基于条件的类？

4 个答案: