ng-class中的if else判断

ng-class中的if else判断

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

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

(1)使用运算符

[html] view plain copy print?

  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‘; };
时间: 2024-10-05 21:33:29

ng-class中的if else判断的相关文章

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

通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板开始入手是个不错方式,因为这部分内容相对简单好理解,而且是视图层的东西,大家都喜欢可以立马看得见的东西嘛.本篇我将搜罗模板中的常用指令一一测试,了解其使用方法,有点像背单词的感觉,会比较枯燥.不过对于初学,这样的枯燥是必须要经历的,开始~ 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下

android 从相册中选择图片并判断图片是否旋转

今天在做图片合成时,首先从相册中选择图片,然后判断该图片是否旋转了,今天就讲下图片是否旋转,直接上代码 /** * 读取照片exif信息中的旋转角度 * * @param path * 照片路径 * @return角度 获取从相册中选中图片的角度 */ public static int readPictureDegree(String path) { if (TextUtils.isEmpty(path)) { return 0; } int degree = 0; try { ExifInt

android中根据touch事件判断单击及双击

private static final int MAX_INTERVAL_FOR_CLICK = 250;     private static final int MAX_DISTANCE_FOR_CLICK = 100;     private static final int MAX_DOUBLE_CLICK_INTERVAL = 500;     int mDownX = 0;     int mDownY = 0;     int mTempX = 0;     int mTempY

(24)Poweshell中的if条件判断

在前面的章节中,主要介绍了Powershell的开发工具,变量,运算符以及一些特殊的变量,从本节开始介绍Powershell中的语法结构. 本节主要介绍Powershell中的if条件判断.另外希望读者从本节开始使用Powershell_ISE进行代命令的输入与运行,Powershell_ISE提供了界面化的命令输入,参数提示,自带补全,debug等特性,非常有利于编写正确的脚本. if可用于根据一个或多个条件测试的结果选择运行不同的命令.与Java.C#.C.C++编程语言中的if的使用方法完

Delphi 7 中,如何快速判断SQL是否能连接上??

Delphi 7 中,如何快速判断SQL是否能连接上?? 谢谢各位!! with DM do begin Conn.Connected := False; Conn.ConnectionString := Connstring; try Conn.Connected := True; except Application.MessageBox('Server connect error!!',cp_Main,MB_OCE); end; end; 你这个只是先断开再重新连接一下,如果SQL服务是没

String类中的常用方法_判断

字符串判断:1,字符串石佛包含某个字符串.boolean contains(str); 特殊之处:indexOf(String str),如果返回的值是-1,那么就表示不包含这个字符串 也可以实现判断. 2,字符串是否有内容.boolean isEmpty() 字符串为空时返回true 3,字符串是否以指定内容开头  boolean startsWith(String str) boolean startsWith(String str,int fromindex); 4,字符串是否以指定内容结

android在sqlite数据库的SQLiteOpenHelper中的onUpgrade里判断表是否存在

private boolean tabbleIsExist(String tableName, SQLiteDatabase db) { LogUtils.d("DatabaseHelper", "checking tabbleIsExist " + tableName); boolean result = false; if (tableName == null) { return false; } Cursor cursor = null; try { Stri

sql字段中逗号分隔字符串的判断

例如,数据表t1中有一个字段PlayTheme存放的数值类似如下: 第一行:1,2,12 第二行:22,222,2222 第三行:1,2 第四行:2,12 第五行:2 如果你想取出PlayTheme字段包含'2'的行,在构造SQL(参数形式)时,要是写成下面这种形式的话,则会将五行一起取出来,显然达不到预期效果,第二行不是你想要的: SqlStr.AppendFormat(@"WHERE … AND t1.PlayTheme LIKE '%{0}%'", param); 但是,写成下面

python 中 if __name__ == &#39;__main__&#39; 判断的作用

假设这样一个a.py文件 def fun1(): ........ def fun2(): ......... if __name__=='__main__': ......#执行的一些语句 当你执行这个a.py文件时, __name__ == '__main__'为真,后面的语句可以执行 当你在别的文件中import a文件,当做模块使用时,__name__ == '__main__'为假,后面的语句不执行了,只有前面定义的函数其作用. 如果没有这句话话,你在b.py中引用a的话,那些执行语句