ng-class中的if else判断

来源:互联网 发布:编程常用的算法 编辑:程序博客网 时间:2024/05/20 14:28

来自于stackoverflow的一个问题,自己刚好用到,搬过来做个标记。原问题链接

在使用ng-class时,有些时候会碰到根据是否满足条件来设置元素的样式,使用以下方法可以达到这样的目的。

(1)使用运算符

<div ng-class="variable == 1 ? 'class1' : (variable == 2 ? 'class2' : (variable ==3 ? 'class3' : 'class4'))"></div>

这样写无需在javascript中添加额外代码,但是需要注意的是要让代码具有良好的可读性。

(2)使用额外的方法

<div ng-class="setStyle(variable)"></div>

然后使用以下的代码: 
$scope.setStyle = function(args) {   if(args == 1) return 'class1';   else if(args ==2) return 'class2';   else if(args == 3) return 'class3'; };
这样的好处是能保证html代码的干净,不会在html中嵌入逻辑。
1 0
原创粉丝点击