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'; };

最新文章

  1. Mysql安装出现=========== install/remove of the Service Denied
  2. html中的空格显示问题
  3. UITableView的scrollToRowAtIndexPath:atScrollPosition:animated的崩溃
  4. mac配置impala odbc
  5. Android——android相对布局(RelativeLayout)及属性
  6. MainActivity获取fragment控件button监听报空指针错误
  7. iOS 使用FMDB SQLCipher给数据库加密
  8. 【转】[Java] HashMap使用的示例
  9. Dragger简介
  10. android上line-height的问题
  11. 【面向代码】学习 Deep Learning(三)Convolution Neural Network(CNN)
  12. C#从SQL server数据库中读取l图片和存入图片
  13. Entity FrameWork 实体属性为decimal时默认只保存2位小数
  14. cocos2d导入iOS原生项目
  15. C++ 如何获取三个相同数值中的最大值或最小值?
  16. Django中Form的基本使用
  17. Python 函数参数*expression 之后为什么只能跟关键字参数
  18. #Java学习之路——基础阶段二(第三篇)
  19. (贪心 字符串 打好基础)51nod 1182完美字符串
  20. 【开源】微信小程序、小游戏以及 Web 通用 Canvas 渲染引擎 - Cax

热门文章

  1. Spark RDD API扩展开发
  2. java中的char占几个字节
  3. rqnoj-208-奥运火炬到厦门-dp
  4. ScaleIO 1.2 基础
  5. 用C#实现木马程序
  6. SQL PRIMARY KEY,SQL FOREIGN KEY
  7. 解决 org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type的问题
  8. (转)Session URL重写
  9. Mongodb 官网驱动2.2.4.26版本 增,删 改,查
  10. 使用js的indexOf,lastIndexOf,slice三函数轻易得到url的服务器,路径和页名