你的第一次尝试几乎是正确的，它应该工作没有引号。

{test: obj.value1 == 'someothervalue'}

这是plnkr。

补充一下:您还可以使用逻辑运算符来形成像这样的逻辑表达式

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

Angular语法是使用：操作符来执行与如果修饰符等价的操作

<div ng-class="{ 'clearfix' : (row % 2) == 0 }">

将clearfix类添加到偶数行。尽管如此，表达式可以是我们在正常的if条件下可以拥有的任何东西，它应该被求值为真或假。

在ng-repeat中使用ng-class

<table>
<tbody>
<tr ng-repeat="task in todos"
ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
<td>\{\{$index + 1}}</td>
<td>\{\{task.name}}</td>
<td>\{\{task.date|date:'yyyy-MM-dd'}}</td>
<td>\{\{task.status}}</td>
</tr>
</tbody>
</table>

对于任务中的每个状态。Status为该行使用不同的类。

当有人必须运行复杂的逻辑来决定合适的CSS类时，使用function和ng-class是一个很好的选择。

http://jsfiddle.net/ms403Ly8/2/

HTML:

<div ng-app>
<div ng-controller="testCtrl">
<div ng-class="getCSSClass()">Testing ng-class using function</div>
</div>
</div>

CSS:

.testclass { Background: lightBlue}

# EYZ0:

function testCtrl($scope) {
$scope.getCSSClass = function() {
return "testclass ";
}
}

角JS在ng-class Directive中提供此功能。你可以在里面放置条件，也可以赋值条件类。您可以通过两种不同的方式来实现这一点。

1型

<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>

在此代码中，类将根据状态值的值应用

如果状态值为0，则应用类一个

如果状态值为1，则应用类两个

如果状态值为2，则应用类三个

2型

<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>

在哪个类中应用状态的值

如果状态值是1或正确，那么它将添加类test_yes

如果状态值是0或false，那么它将添加类test_no

我看到上面的例子，但他们都开始花括号(json地图)。另一种选择是返回基于计算的结果。结果也可以是一个css类名的列表(不仅仅是map)。例子:

ng-class="(status=='active') ? 'enabled' : 'disabled'"

或

ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"

解释:如果状态是活动的，将使用类enabled。否则，将使用类disabled。

列表[]用于使用多个类(而不是一个)。

我将向您展示动态应用ng-class的两个方法

步骤1

通过使用三元运算符

<div ng-class="condition?'class1':'class2'"></div>

输出

如果你的条件为真，那么class1将应用到你的元素，否则将应用class2。

缺点

当您尝试在运行时更改条件值时，该类将以某种方式不会更改。因此，如果你有动态类更改的要求，我建议你去step2。

步骤2

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

输出

如果你的条件与value1匹配，那么class1将被应用到你的元素，如果与value2匹配，那么class2将被应用，以此类推。动态类更改可以很好地使用它。

希望这对你有所帮助。

有一个简单的方法，你可以使用html类属性和速记if/else。没必要把它弄得这么复杂。只需使用下面的方法。

<div class="\{\{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your Content</div>

使用这个

<div ng-class="{states}[condition]"></div>

例如，如果条件为[2 == 2]，则状态为{true: '…'， false: '…'}

<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>

对于Angular 2，使用这个

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>

ng-class是AngularJs核心的一个指令。在其中，您可以使用“字符串语法”，“数组语法”，“求值表达式”，“三元运算符”和下面描述的更多选项:

使用字符串语法的ngClass

<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">


<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!

使用字符串语法的ngClass的演示示例

使用数组语法的ngClass

这类似于字符串语法方法，只不过您可以应用多个类。

<!-- both input boxes below will be classes for the div -->
<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">


<!-- this div will take on both classes from above -->
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!

使用求值表达式

使用ngClass的一个更高级的方法(也是你可能使用得最多的方法)是求值表达式。其工作方式是，如果一个变量或表达式的计算值为true，则可以应用某个类。如果不是，那么该类将不会被应用。

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?


<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">

使用求值表达式的例子

ngClass使用值

这类似于求值表达式方法，只是您只能将多个值与唯一的变量进行比较。

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

使用三元操作符

三元操作符允许我们使用简写来指定两个不同的类，一个用于表达式为真，另一个用于表达式为假。下面是三元操作符的基本语法:

ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">

评估第一个，最后一个或特定的数字

如果您正在使用ngRepeat指令，并且希望将类应用到first、last或列表中的特定数字，则可以使用ngRepeat的特殊属性。这些包括$first， $last， $even， $odd和其他一些。这里有一个如何使用这些的例子。

<!-- add a class to the first item -->
<ul>
<li ng-class="{ 'text-success': $first }" ng-repeat="item in items">\{\{ item.name }}</li>
</ul>


<!-- add a class to the last item -->
<ul>
<li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">\{\{ item.name }}</li>
</ul>


<!-- add a class to the even items and a different class to the odd items -->
<ul>
<li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">\{\{ item.name }}</li>
</ul>