复杂角度 js ng 类

Question

我有这个组件，但在设置css类时遇到问题。我希望它始终有一个"box"类，然后具有由指令"class"参数和一个条件类"mini"指定的其他类。

从概念上讲，我想要实现的是这样的：

<div class="box {{class}}" data-ng-class="{mini: !isMaximized}">
...
</div>

问题是当我设置类 html 属性时，ng-class 属性被省略了。如何在不更改控制器的情况下使我的示例工作？甚至可能吗，或者我应该在控制器中设置类（我希望避免）？

Answer 1

一个快速的解决方案是在ng-class属性中定义盒子类：

<div data-ng-class="{mini: !isMaximized, box: true}"></div>

如果要将作用域变量作为类包含，则不能使用 ng-class：

<div class="{{class}} box {{!isMaximized && 'mini' || ''}}">

角度表达式不支持三元运算符，但可以像这样模拟：

条件&&（如果为真，则回答）||（如果回答错误）

Answer 2

我需要多个类，其中一个是$scope派生的，另一个是文字类。感谢安德烈的提示，下面对我有用。

<h2 class="{{workStream.LatestBuildStatus}}" 
    ng-class="{'expandedIcon':workStream.isVisible,  'collapsedIcon':!workstream.isvisible}">{{workStream.Name}}</h2>

Answer 3

编辑：对于较新版本的Angular，请参阅Nitins答案，因为它是最好的一个ATM

对我来说，这有效（我目前正在研究 AngularJS v1.2.14，所以我想 1.2.X+ 应该支持这一点，不确定早期版本）：

<div class="box" data-ng-class="{ {{myScopedObj.classesToAdd}}: true, mini: !isMaximized }"></div>

我用{{myScopedObj.classesToAdd}}替换了您的{{class}}，以表明任何作用域变量甚至更复杂的对象都可以以这种方式使用。

因此，以这种方式构建的每个 DIV 元素都将具有"box"类和包含在myScopedObj.classesToAdd中的任何类（在使用 ng-repeat 时很有用，数组中的每个元素都需要应用不同的类），如果!isMaximized，它将具有"迷你"类。

Answer 4

另一种不使用双花括号并包含作用域变量的方法，使用 angular v1.2+ 进行测试。

<div ng-class="['box', 
                aClass, 
               {true:'large': false: 'mini'}[isMaximized]]"></div>

这也相当不错，因为变量可以使用不同类型的索引，而不会增加使用三元的复杂性。它还可以消除任何否定的需要;)这是一个小提琴链接

Answer 5

您可以使用下面给出的简单表达式

ng-class="{'active' : itemCount, 'activemenu' : showCart}"