复杂的angular度js ng级

我有组件，并有一个问题设置为它的CSS类。 我希望它总是有一个“框”类，然后有指令“class”参数指定的附加类和一个条件类“mini”。

从概念上说，我想要达到的是这样的：

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

问题是，当我设置类的HTML属性，ng-class属性被省略。 如何让我的例子在不更改控制器的情况下工作？ 这是甚至可能的，还是应该在控制器中设置类（而我希望避免）？

Answer 1

我需要多个类，其中一个是派生的$范围，其他是文字类。 感谢安德烈的提示，下面为我工作。

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

Answer 2

一个快速的解决scheme是定义ng-class属性中的box类：

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

如果你想包含一个范围variables作为一个类，你不能使用ng-class：

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

Angularexpression式不支持三元运算符，但可以这样模拟：

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

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}}replace了你的{{class}} ，以显示任何范围的variables，甚至更复杂的对象都可以这样使用。

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

Answer 4

另一种方法来做到这一点，没有双花括号，并包括范围variables，用angular度v1.2 +进行testing。

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

这也是相当不错的，因为variables可以使用不同的types作为索引而不会增加使用三元组的复杂度。 它也可以消除任何需要否定;） 这是一个小提琴的链接

Answer 5

你可以使用下面给出的简单expression式

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