有没有办法让ng-class这样的表达式成为条件表达式?
例如，我尝试过以下方法:
<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>
这段代码的问题是，不管obj是什么。Value1是，类test总是应用于元素。这样做:
<span ng-class="{test: obj.value2}">test</span>
只要obj。Value2不等于真值，该类未应用。现在我可以通过这样做来解决第一个例子中的问题:
<span ng-class="{test: checkValue1()}">test</span>
其中checkValue1函数是这样的:
$scope.checkValue1 = function() {
return $scope.obj.value === 'somevalue';
}
我只是想知道这是不是ng级的工作方式。我还建立了一个自定义指令，我想做类似的事情。然而，我找不到一种方法来观看一个表情(也许这是不可能的，这就是为什么它这样工作的原因)。
这里有一个plnkr说明我的意思。
当有人必须运行复杂的逻辑来决定合适的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}
JavaScript:
function testCtrl($scope) {
$scope.getCSSClass = function() {
return "testclass ";
}
}
ng-class是AngularJs核心的一个指令。在其中，您可以使用“字符串语法”，“数组语法”，“求值表达式”，“三元运算符”和下面描述的更多选项:
使用字符串语法的ngClass
这是使用ngClass最简单的方法。你可以将Angular变量添加到
Ng-class，这是将用于该元素的类。
<!-- 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使用求值表达式的示例
ngClass使用值
这类似于求值表达式方法，只是您只能将多个值与唯一的变量进行比较。
<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>
使用三元操作符
三元操作符允许我们使用简写来指定两个不同的类，一个用于表达式为真，另一个用于表达式为假。下面是三元操作符的基本语法:
ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">
评估第一个，最后一个或特定的数字
如果你正在使用ngRepeat指令，并且你想要将类应用到列表中的第一个、最后一个或特定的数字，你可以使用ngRepeat的特殊属性。其中包括$first， $last， $偶数，$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>
我将向您展示动态应用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将被应用，以此类推。动态类更改可以很好地使用它。
希望这对你有所帮助。
