Angularjs 复角类

我有这个组件，在设置css类时遇到问题。 我希望它总是有一个“box”类，然后有指令“class”参数指定的附加类和一个条件类“mini”

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

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

...

问题是，当我设置class html属性时，ng class属性被忽略。

---

如何使我的示例在不更改控制器的情况下工作？是否可能，或者我是否应该在控制器中设置类（我希望避免）？

快速解决方案是在ng class属性中定义box类：

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

如果要将范围变量包含为类，则不能使用ng类：

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

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

条件&（如果为真则回答）|（如果为假则回答）

编辑：对于Angular的较新版本，请参见，因为它是最好的版本

对我来说，这是可行的（我目前正在开发AngularJSV1.2.14，所以我想1.2.X+应该支持这一点，但不确定早期版本）：

我用

{myScopedObj.classesToAdd}}

替换了您的

{{class}}

，以表明任何作用域变量或更复杂的对象都可以这样使用

---

因此，以这种方式装箱的每个DIV元素都将具有“box”类和

myScopedObj.classesToAdd

中包含的任何类（在使用ng repeat时非常有用，数组中的每个元素都需要应用不同的类），如果

，则具有“mini”类！isMaximized

我需要多个类，其中一个是$scope派生的，另一个是文本类。多亏了安德烈的提示，下面的内容对我很有用

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

{{workStream.Name}

另一种不用双大括号的方法，包括范围变量，使用angular v1.2+测试

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

这也很好，因为变量可以使用不同的类型作为索引，而不会增加使用三元组的复杂性。它还可以消除任何否定的需要；）

---

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

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

---

分配用户指定的属性：{{class}}怎么样？修改了我的响应以包含用户指定的类。你真是太棒了！这救了我一命：“如果你想把一个范围变量作为一个类，你就不能使用ng类”另外，AngularJS现在有了三元条件运算符。@请不要编辑代码，尤其是当您的编辑完全不正确时。看起来这不再是Angular.js最新版本和上述示例的问题。通过这一点，我能够在Angular的较新版本中执行类似的操作：

，这实际上是解决问题的最佳方案。

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