Question

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

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

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

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

Answer 1

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

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

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

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

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

条件＆amp;＆amp; （如果回答是真的话）|| （如果错误则回答）

Answer 2

我需要多个类，其中一个是$ scope派生的，另一些是文字类。感谢安德烈的暗示，下面为我工作。

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

Answer 3

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

对我来说，这很有效（我现在正在研究AngularJS v1.2.14，所以我猜1.2.X +应该支持这个，不确定早期版本）：

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

我将{{class}}替换为{{myScopedObj.classesToAdd}}，以表明可以使用任何范围变量或更复杂的对象。

所以，每个以这种方式创作的DIV元素都会有＆＃34; box＆＃34; class和myScopedObj.classesToAdd中包含的任何类（在使用ng-repeat时很有用，并且数组中的每个元素都需要应用不同的类），并且它将具有＆＃34; mini＆＃34; class !isMaximized。

Answer 4

另一种方法是在没有双花括号的情况下执行此操作并包含范围变量，使用angular v1.2 +进行测试。

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

它也相当不错，因为变量可以使用不同的类型作为索引而不会增加使用三元组的复杂性。它也可以消除任何否定的需要;）的 Here is a fiddle link

Answer 5

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

flavour

复杂的角度js ng级

5 个答案: