angularjs中ng-class常用写法,三元表达式、评估表达式与对象写法
壹 ❀ 引
ng-class可以说在angularjs样式开发中使用频率特别高了,这不我想利用ng-class的三元运算符的写法来定义一个样式,结果怎么都想不起来正确写法,恼羞成怒还是整理一遍吧,那么本文开始:
贰 ❀ 常用写法
1.ng-class使用变量
即ng-class的值是一个变量,当我们改变变量值时,得到的class名也会对应改变;例如下面的例子中文本样式的class名由select的值决定,选择不同选项得到不同的效果,例如:
<select name="" id="" ng-model="vm.style">
<option value="blue">蓝底白字</option>
<option value="red">红底白字</option>
</select>
<span ng-class="vm.style">听风是风</span>
如果我们有多个变量作为ng-class的值,可以通过数组的方式包裹住这些变量名,像这样:
<span ng-class="[vm.style,vm.size]">听风是风</span>
2.ng-class评估表达式
这种非常非常常见,我们已经确定了ng-class的名字,但是用一个变量决定这个class是否生效,例如:
<input type="checkbox" ng-model="vm.status">
<span ng-class="{red: vm.status}">听风是风</span>
如果我们需要控制多个class名,请使用逗号进行分割
<span ng-class="{red: vm.status,blue: vm.value}">听风是风</span>
注意:class名有加引号和不加引号两种写法,博客中例子都没加引号,但推荐都加引号;原因是如果需要控制的class名为多个单词,不加引号以 - 拼接会报错,小驼峰命名不会,但如果加引号,使用 - 拼接可小驼峰都没问题。
正确写法:
<span ng-class="{redColor: vm.status}">听风是风</span>
<span ng-class="{'red-color': vm.status}">听风是风</span>
错误写法:
<span ng-class="{red-color: vm.status}">听风是风</span>
3.ng-class三元表达式(三元运算符)
这种写法就更加常用了,我们控制一个变量的真假状态,为真使用样式A,为假使用样式B:
<input type="checkbox" ng-model="vm.status">
<span ng-class="vm.status ? 'red' : 'blue'">听风是风</span>
我们也可以使用评估表达式来模拟三元的效果:
<input type="checkbox" ng-model="vm.status">
<span ng-class="{red: vm.status,blue: !vm.status}">听风是风</span>
4.ng-class对象写法
这种写法一般使用比较少见,同样是根据变量来决定启用不同的class,直接上代码:
<select name="" id="" ng-model="vm.status">
<option value="color-blue">蓝色</option>
<option value="color-red">红色</option>
</select>
<span ng-class="{color-blue:'blue',color-red:'red'}[vm.status]">听风是风</span>
当然我们也能使用对象写法模拟三元表达式的效果:
<input type="checkbox" ng-model="vm.status">
<span ng-class="{true:'blue',false:'red'}[vm.status]">听风是风</span>
感受到ng-class的灵活与强大了吗,日常开发中合理使用ng-class能让你的样式表达非常便捷,比如我在用户登录注册功能块,就使用ng-class实现了密码显示隐藏的效果:
<i class="eye" ng-click="vm.showPwd($event)" ng-class="vm.eyeStatus ? 'eyeOpen':'eyeClose'"></i>
那么到这里本文就结束了,希望对你有所帮助!
angularjs中ng-class常用写法,三元表达式、评估表达式与对象写法的更多相关文章
- angularJs中缓存数据,免去重复发起请求的几种写法
带缓存处理的两种写法 过程:点击button触发load()方法,请求数据成后显示到页面中.如果已经请求过则从缓存中读取. 在线浏览 写法1: function demo(){ if (demo.ca ...
- angularjs中安卓原生APP调用H5页面js函数,js写法应注意
安卓原生app调用js方法,js方法应写在html下的script标签内,不能有任何function包裹,例如angular的controller层,这样APP也是获取不到的: 所以只有放在html中 ...
- Angularjs中controller的三种写法
在Angular中,Directive.Service.Filter.Controller都是以工厂方法的方式给出,而工厂方法的参数名对应着该工厂方法依赖的Service.angularjs中cont ...
- .Net基础篇_学习笔记_第七天_三元数表达式(if-else的转换写法)
三元表达式语法: 表达式1?表达式2:表达式3; 表达式1一般为一个关系表达式.如果表达式1的值为true,那么表达式2的值就是整个三元表达式的值.如果表达式1的值为false,那么表达式3的值就是整 ...
- C#中RDLC报表常用表达式(字符串和转换)
字符串函数 (1)使用串联运算符和 Visual Basic 常量可将多个字段组合在一起.以下表达式返回两个字段,它们分别位于同一文本框的不同行中:=Fields!FirstName.Value &a ...
- 转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
- 理解AngularJS中的依赖注入
点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...
- AngularJS学习--- AngularJS中模板链接和图像 ng-src step6
接上一篇文章,本文将主要介绍angularjs中的模板链接,和图像显示? 首先,切换分支,启动项目: git checkout step- npm start 1.效果 相较于前一篇文章,明显感觉多了 ...
- AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5
前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...
随机推荐
- 使用shell脚本查看数据库负载情况
原创 Oracle 作者:jeanron100 时间:2014-05-23 08:56:26 8912 2 平时在查看数据库的问题时,会有种迷茫的感觉,如果没有任何人反馈问题,基本上没有主动查找问 ...
- V4 Reduce Transportable Tablespace Downtime using Cross Platform Incremental Backup (Doc ID 2471245.1)
V4 Reduce Transportable Tablespace Downtime using Cross Platform Incremental Backup (Doc ID 2471245. ...
- Java_可变参数类型
Java方法中的可变参数类型,也称为不定参数类型,是一个非常重要的概念 举栗子 public class TestVarArgus { public static void dealArray(int ...
- Java_foreach不能remove
foreach 阿里巴巴java开发手册 [强制]不要在foreach循环里进行元素的remove/add操作.remove元素请使用Iterator方式,如果并发操作,需要对Iterator对象加锁 ...
- Python语法速查: 13. 操作系统服务
返回目录 本篇索引 (1)sys模块 (2)os模块 (3)与Windows相关模块 (4)subprocess模块 (5)signal模块 (1)sys模块 sys模块用于Python解释器及其环境 ...
- 【转载】【笔记】vue-router之路由传递参数
参考博客地址:https://blog.51cto.com/4547985/2390799 1.通过<router-link> 标签中的to传参 基本语法: <router-link ...
- 关于tomcat对编码不正确的url参数报错的解决
按照规范,url参数必须使用限定字符,其它字符需要进行编码,用像js的encodeurlcomponent函数. 在IE和360浏览器的兼容模式,不会自动对url的参数进行编码,会导致tomcat报错 ...
- [阅读笔记]EfficientDet
EfficientDet 文章阅读 Google的网络结构不错,总是会考虑计算性能的问题,从mobilenet v1到mobile net v2.这篇文章主要对近来的FPN结构进行了改进,实现了一种效 ...
- Python网络爬虫_Scrapy框架_1.新建项目
在Pycharm中新建一个基于Scrapy框架的爬虫项目(Scrapy库已经导入) 在终端中输入: ''itcast.cn''是为爬虫限定爬取范围 创建完成后的目录 将生成的itcast.py文件移动 ...
- 简单的PHP上传图片实例
分享一个简单的PHP上传图片实例,本实例主要介绍了上传图片的一些限制判断和上传图片的方法. 首先我们在form表单加上上传附件#file,上传按钮#imgbut,记得给form 表单加上multipa ...