38

我有该组件，但在为其设置 css 类时遇到问题。我希望它始终具有一类“盒子”，然后具有由指令“类”参数和一个条件类“迷你”指定的附加类。

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

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

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

4

5 回答 5

62

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

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

如果你想包含一个作用域变量作为一个类，你不能使用 ng-class：

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

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

条件 && (如果为真则回答) || （如果为假，请回答）

于 2012-11-28T15:05:44.387 回答
12

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

<h2 class="{{workStream.LatestBuildStatus}}" 
    ng-class="{'expandedIcon':workStream.isVisible,  'collapsedIcon':!workstream.isvisible}">{{workStream.Name}}</h2>
于 2015-02-25T23:40:50.447 回答
4

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

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

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

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

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

于 2014-04-08T08:45:10.637 回答
3

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

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

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

于 2015-05-09T04:03:47.033 回答
2

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

ng-class="{'active' : itemCount, 'activemenu' : showCart}"
于 2015-06-02T05:16:26.133 回答