有没有办法让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说明我的意思。
我将向您展示动态应用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将被应用,以此类推。动态类更改可以很好地使用它。
希望这对你有所帮助。
当有人必须运行复杂的逻辑来决定合适的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 ";
}
}