前言:前几天写代码的时候遇到一个问题,有一个按钮,有“已关注”和“+关注”两种状态,需要对这两种状态的按钮的背景颜色进行区分,单后点击“已关注”按钮状态变成“+关注”,相反,点击“+关注”按钮变成“已关注”相应的背景颜色都需要发生改变。

点击事件里面改变按钮的背景颜色:

angular.element(path).css('background', 'blue');//改变按钮的背景颜色  path:按钮的路径

这个能实现点击的时候改变背景颜色,但是在最开始从数据库里面读出来的时候并没有进行区分,这样写也不适用于最初的区分,于是想到了三目运算,但是angualarjs的三目运算并没有写过,倒腾了半天,终于解决:

<button class="bottonflag botton1" ng-click="changeBtn(li.id)" style="{{li.flag === '已关注' ? 'background: blue' : 'background : pink'}}">{{li.flag}}</button>

通过按钮的值判断,如果值等于“已关注”就将背景颜色设为蓝色,否则背景颜色就为粉色,值得注意的是,这个外面要加“{{}}”,因为里面涉及到了从数据库里面都出来的值。

angularjs的三目运算的更多相关文章

  1. ng-class结合三目运算

    ng-class文档:https://docs.angularjs.org/api/ng/directive/ngClass 但是在实际项目中可能会用到三目运算,实例如下: <ul> &l ...

  2. 【Python全栈笔记】03 [模块二] 16-17 Oct Set 集合,三目运算

    Set 集合 set - unordered collections of unique elements 创建一个set/一个空set # create a new set set1 = {1,2, ...

  3. python函数,lambda表达式,三目运算,列表解析,递归

    一.自定义函数 定义函数时,函数体不执行:只有在调用函数时,函数体才执行.函数的结构: 1. def 2. 函数名 3. 函数体 def func_name(): 函数体 4. 返回值 如果没有声明返 ...

  4. 三目运算的使用&bytes类型转str类型

    一.三目运算的使用 就像c语言中有三目运算符一样,python中也有三目运算符,废话不多说直接上代码 a=3 c=4 b=a if a>c else c print(b) 意思就和 if a&g ...

  5. 三目运算:and/or 技巧

    三目运算:and/or 技巧 and, or 联合起来有个小技巧: print 2 < 3 and True or False 说明:     如果  2 小于 3 了,则输出 True ,  ...

  6. js switch判断 三目运算 while 及 属性操作

    三 目运算:如var a = 10: var b= 12: c = a>b ?a:b; 若成立执行a否则执行b var isHide = true; 若用if判断语句如下 if(isHide) ...

  7. day09三目运算

    内容详细 1.三目运算(三元运算) v=前面 if 条件 else 后面 if 条件: v="前面" else: v="后面" #让用户输入值,如果值是整数,则 ...

  8. python运算符,数据类型,数据类型操作,三目运算,深浅拷贝

    算数运算符: Py2中精确除法需要导入:from __future__ import division,(符由特  ,将来的.滴未省,除法) py3不需要导入 赋值运算符: 比较运算符: 成员运算符: ...

  9. Delphi中的三目运算函数有哪些?(XE10.2+WIN764)

    相关资料:https://www.cnblogs.com/rogge7/p/6078903.html 问题现象:在做一个判断时突然想到了C++的三目运算,就在想Delphi中一共有几个? 问题处理: ...

随机推荐

  1. 阿里云服务器Linux CentOS安装配置(九)shell编译、打包、部署

    阿里云服务器Linux CentOS安装配置(九)shell编译.打包.部署 1.查询当前目录以及子目录下所有的java文件,并显示查询结果 find . -name *.java -type f - ...

  2. PHP 获取两个日期之间的日期数组/月份数组

    function getEmptyArr($s_time,$e_time,$type){ $tmp = array(); if($type=='day'){ $s_time = strtotime($ ...

  3. Java 对象销毁

    Java语言拥有一套完整的垃圾回收机制. 何种对象会被java虚拟机视为垃圾.主要包括以下两种情况: (1)对象引用超过其作用范围,则这个对象将被视为垃圾 (2)将对象赋值为null 参考资料:Jav ...

  4. Java web学习filter (1)

    一.概念:Filter也称之为过滤器,它是Servlet技术中比较激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源: 例如Jsp, Servlet, 静态图片文件 ...

  5. tomcat底层原理实现

    1.首先完成一个server类,用来接收客户端的请求:代码都在一个while(true)循环中,模拟tomcat一直在启动,其中绑定一个端口,用来监听一个端口,然后创建一个输入流,获取请求的输入流,然 ...

  6. MsChart在MVC下的问题

    项目为webform和mvc混用,新建了Areas,在Areas目录下的aspx页面的图表无法显示. 解决方案 第一种方法: 将控件的ImageStorageMode设置为UseImageLocati ...

  7. SpringMVC常用配置-添加静态资源处理器-针对SpringMVC中静态资源无法访问的问题

  8. 1.C语言中的数据类型

    1.深入理解 固定内存大小的别名,可以理解为创建变量的模子. PS:变量是存储空间的的别名,在程序中,通过变量来申请并命名存储空间,通过变量名来使用存储空间. 2.分类:基本数据类型构造数据类型 (1 ...

  9. Python 下的unittest测试框架

    unittest测试框架,直接上图吧: data:数据:主要格式为CSV:读取方式:csv.reade: public:封装的模块:通用的模块单独封装,所需参数设置为变量: testcase:测试用例 ...

  10. 关于jsp的总结

    第一章:jsp技术不仅是开发web应用的先进技术,而且是进一步学习相关技术的基础.jsp引擎是支持jsp程序的web容器,负责运行jsp,并将有关结果发送到客户端.目前流行的jsp引擎之一是tomca ...