ng-class中的if else判断

Posted Lonely existence, lonely burni

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ng-class中的if else判断相关的知识,希望对你有一定的参考价值。

ng-class中的if else判断

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

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

(1)使用运算符

  1. <div ng-class="variable == 1 ? ‘class1‘ : (variable == 2 ? ‘class2‘ : (variable ==3 ? ‘class3‘ : ‘class4‘))">  
  2. </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‘; };


以上是关于ng-class中的if else判断的主要内容,如果未能解决你的问题,请参考以下文章

写 JS 逻辑判断,不要只知道用 if-else 和 switch

写 JS 逻辑判断,不要只知道用 if-else 和 switch

自制Monkey语言编译器:解释执行if..else判断语句

if循环判断

Linux中if-else条件判断语句

BAT用if-else判断