有没有办法让ng-class
这样的表达式成为一个条件?
例如,我曾试过以下的方法。
<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>
这段代码的问题是,无论obj.value1
是什么,类测试总是应用于元素。这样做
<span ng-class="{test: obj.value2}">test</span>
只要obj.value2
不等于truthy值,类就不会被应用。 现在我可以通过这样做来解决第一个例子中的问题了。
<span ng-class="{test: checkValue1()}">test</span>
其中checkValue1
函数看起来像这样。
$scope.checkValue1 = function() {
return $scope.obj.value === 'somevalue';
}
我只是想知道ng-class
是否应该这样工作。 我也在建立一个自定义指令,我想做与此类似的事情。然而,我找不到观察表达式的方法(也许这是不可能的,也是它这样工作的原因)。
这里有一个plnkr来显示我的意思。
你的第一次尝试几乎是正确的,没有引号也应该可以。
{test: obj.value1 == 'someothervalue'}
这里有一个plnkr。
ngClass指令将与任何评价为truthy或falsey的表达式一起工作,这与Javascript表达式有点类似,但有一些不同,你可以阅读这里。 如果你的条件太复杂,那么你可以使用一个返回truthy或falsey的函数,就像你在第三次尝试时那样。
只是为了补充。你也可以使用逻辑运算符来形成逻辑表达式,如
ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
在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>
对于task.status中的每一个状态,都有一个不同的类被用于该行。
Angular JS在[ng-class Directive][1]中提供了这个功能。 在其中,你可以放置条件,也可以分配条件类。 你可以通过两种不同的方式来实现这个功能。
<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>
在这段代码中,该类将根据status值的值进行应用
如果status值为0,则应用类一。
如果status值为1,则应用two类。
如果status值为2,则应用类三。
<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>
根据status的值将适用于哪个类
如果status值为1或true,则会添加类test_yes。
如果status值为0或false,则会添加类test_no。
我在上面看到了很好的例子,但它们都是以大括号(json map)开头的。 另一个选择是基于计算返回一个结果。 结果也可以是一个css类名的列表(不仅仅是map)。 例如:{{18477199}}。
ng-class="(status=='active') ? 'enabled' : 'disabled'"
或
ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"
解释:如果状态为激活,将使用 "启用 "类。
如果状态为激活,将使用 "enabled "类。
否则,将使用disabled
类。
列表"[]"用于使用多个类(而不仅仅是一个)。
Angular的语法是使用:操作符来执行相当于if修改器的操作。
<div ng-class="{ 'clearfix' : (row % 2) == 0 }">
为偶数行添加clearfix类。尽管如此,表达式可以是我们在正常if条件下的任何东西,它应该评估为真或假。
我将向你展示两种方法,通过它们你可以动态地应用ng-class。
通过使用三元运算符
<div ng-class="condition?'class1':'class2'"></div>
如果您的条件为真,那么class1将被应用到您的元素上,否则class2将被应用。
当你在运行时尝试改变条件值时,类不知为何不会改变。 所以,如果你有动态类改变的需求,我建议你走第二步。
<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>
如果你的条件与value1匹配,那么class1将被应用到你的元素上,如果与value2匹配,那么class2将被应用,以此类推。 而动态类的改变也可以用它来实现。
希望对你有所帮助。
当有人需要运行复杂的逻辑来决定合适的CSS类时,使用带有ng-class的函数是一个不错的选择。
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 ";
}
}
用这个
<div ng-class="{states}[condition]"></div>
例如如果条件是[2==2],状态为{true: '...', false: '...'}
<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>
ng-class
是AngularJs核心的一个Directive,其中你可以使用"String Syntax""Array Syntax""Evaluated Expression"""。
其中你可以使用"字符串语法", "数组语法", "评估表达式", "
三元运算符"。
以及下面描述的更多选项。
这是最简单的使用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使用字符串语法][1]的演示例。
这与字符串语法方法类似,只是你可以应用多个类。
<!-- 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使用评价表达式][2]的例子。
这与评估表达式方法类似,只是你可以用唯一的变量比较多个值。
<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>
[1]: https://codepen.io/anon/pen/OeWKNE [2]: https://codepen.io/anon/pen/BgpXdG