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判断的更多相关文章

  1. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  2. bash Shell 中如何实现条件判断之if判断

    http://blog.51cto.com/lovelace/1211353 bash中如何实现条件判断?条件测试类型:    整数测试    字符测试    文件测试 一.条件测试的表达式:     ...

  3. centos shell脚本编程1 正则 shell脚本结构 read命令 date命令的用法 shell中的逻辑判断 if 判断文件、目录属性 shell数组简单用法 $( ) 和${ } 和$(( )) 与 sh -n sh -x sh -v 第三十五节课

    centos   shell脚本编程1 正则  shell脚本结构  read命令  date命令的用法  shell中的逻辑判断  if 判断文件.目录属性  shell数组简单用法 $( ) 和$ ...

  4. js中的数据类型和判断数据类型

    js中的数据类型和判断数据类型 基本数据类型,六大基本数据类型:字符串(String).数字(Number).布尔(Boolean).对象(Object).空(Null).未定义(Undefined) ...

  5. linux Shell中常用的条件判断

    linux Shell中常用的条件判断 -b file            若文件存在且是一个块特殊文件,则为真 -c file            若文件存在且是一个字符特殊文件,则为真 -d ...

  6. 6.6.1 F# 中函数调用的类型判断

    6.6.1 F# 中函数调用的类型判断 尽管,在 F# 中能够用尖括号指定类型參数值.与 C# 中的方式同样.但这样的方法非常少使用. 原因是,当编译器无法判断出全部的信息,须要程序猿的帮助时.我们仅 ...

  7. 关于js中的this之判断this

    this绑定规则的优先级顺序 new操作符绑定 > 显示绑定 > 隐式绑定 > 默认绑定   所以在判断函数在某个调用位置应用的是哪条规则,可以按下列这样的顺序   if(函数在ne ...

  8. SQL语句Where中使用别名作为判断条件

    当我们使用某个表达式作为输出的一列时,我们无法再Where条件中直接使用该列作判断条件.   例如下面的SQL语句: select id, (c1 + c2) as s from t1  where ...

  9. js面向对象编程:if中可以使用那些作为判断条件呢?

    作者来源http://www.2cto.com/kf/201407/314978.html搬运 在所有编程语言中if是最长用的判断之一,但在js中到底哪些东西可以在if中式作为判断表达式呢? 例如如何 ...

随机推荐

  1. Linux下解决 id_rsa 权限不够

    问题 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @         WARNING: UNPROTECTED PRIVAT ...

  2. 服务器主机上RAID Card的Write Caching Policy

    在Cisco Server的DRAC中, 创建virtual drive时, 会看到下面的选项.   那么Write back, write through, write back bad BBU之间 ...

  3. HTML5-IOS WEB APP应用程序(IOS META)

    触摸屏网站的开发其实现在来讲比前几年移动端网站开发好多了,触摸屏设备IOS.Android.BBOS6等系统自带浏览器均为WEBKIT核心,这就说明PC上面尚未立行的HTML5 CSS3能够运用在这里 ...

  4. Unity3d使用json与javaserver通信

    Unity3d使用json能够借助LitJson 下载LitJson,复制到Unity3d工作文件夹下 于是能够在代码中实现了 以下发送请求到server并解析 System.Collections. ...

  5. Python网络爬虫 - 2. Beautiful Soup小试牛刀

    目标: 我们解析百度首页的logo bs_baidu_logo.py from urllib.request import urlopen from bs4 import BeautifulSoup ...

  6. KineticJS教程(9)

    KineticJS教程(9) 作者: ysm  9.选择器 Kinetic在舞台.层和组对象上都提供了get方法,用于返回这三者中包含的对象. 9.1.根据ID获取对象 要用id获取对象,首先要给对象 ...

  7. 浅析C++中的this指针

    转自:http://blog.csdn.net/starlee/article/details/2062586 有下面的一个简单的类: class CNullPointCall { public: s ...

  8. Appium环境的安装与配置,Python测试脚本测试

    Appium自动化测试系列1 - Appium环境的安装与配置 发表于4个月前(2015-01-27 14:34)   阅读(803) | 评论(0) 0人收藏此文章, 我要收藏 赞0 寻找 会’偷懒 ...

  9. JavaScript 参考教程

    JavaScript 是使用“对象化编程”的,或者叫“面向对象编程”的.所谓“对象化编程”,意思是把 JavaScript 能涉及的范围划分成大大小小的对象,对象下面还继续划分对象直至非常详细为止,所 ...

  10. sql2008拒绝了对对象 (数据库 ,架构'dbo')的SELECT权限

    连接sql2008的时候,出现了这种一直报权限错误:错误截图如下: 所见效果描述:在windows身份验证的 情况下登陆进去数据库的表都是可以打开的,当换到sa或者别的账号登陆进去的时候这个时候我们点 ...