壹 ❀ 引

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常用写法,三元表达式、评估表达式与对象写法的更多相关文章

  1. angularJs中缓存数据,免去重复发起请求的几种写法

    带缓存处理的两种写法 过程:点击button触发load()方法,请求数据成后显示到页面中.如果已经请求过则从缓存中读取. 在线浏览 写法1: function demo(){ if (demo.ca ...

  2. angularjs中安卓原生APP调用H5页面js函数,js写法应注意

    安卓原生app调用js方法,js方法应写在html下的script标签内,不能有任何function包裹,例如angular的controller层,这样APP也是获取不到的: 所以只有放在html中 ...

  3. Angularjs中controller的三种写法

    在Angular中,Directive.Service.Filter.Controller都是以工厂方法的方式给出,而工厂方法的参数名对应着该工厂方法依赖的Service.angularjs中cont ...

  4. .Net基础篇_学习笔记_第七天_三元数表达式(if-else的转换写法)

    三元表达式语法: 表达式1?表达式2:表达式3; 表达式1一般为一个关系表达式.如果表达式1的值为true,那么表达式2的值就是整个三元表达式的值.如果表达式1的值为false,那么表达式3的值就是整 ...

  5. C#中RDLC报表常用表达式(字符串和转换)

    字符串函数 (1)使用串联运算符和 Visual Basic 常量可将多个字段组合在一起.以下表达式返回两个字段,它们分别位于同一文本框的不同行中:=Fields!FirstName.Value &a ...

  6. 转: 理解AngularJS中的依赖注入

    理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...

  7. 理解AngularJS中的依赖注入

    点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...

  8. AngularJS学习--- AngularJS中模板链接和图像 ng-src step6

    接上一篇文章,本文将主要介绍angularjs中的模板链接,和图像显示? 首先,切换分支,启动项目: git checkout step- npm start 1.效果 相较于前一篇文章,明显感觉多了 ...

  9. AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

    前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...

随机推荐

  1. 使用shell脚本查看数据库负载情况

    原创 Oracle 作者:jeanron100 时间:2014-05-23 08:56:26  8912  2 平时在查看数据库的问题时,会有种迷茫的感觉,如果没有任何人反馈问题,基本上没有主动查找问 ...

  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. ...

  3. Java_可变参数类型

    Java方法中的可变参数类型,也称为不定参数类型,是一个非常重要的概念 举栗子 public class TestVarArgus { public static void dealArray(int ...

  4. Java_foreach不能remove

    foreach 阿里巴巴java开发手册 [强制]不要在foreach循环里进行元素的remove/add操作.remove元素请使用Iterator方式,如果并发操作,需要对Iterator对象加锁 ...

  5. Python语法速查: 13. 操作系统服务

    返回目录 本篇索引 (1)sys模块 (2)os模块 (3)与Windows相关模块 (4)subprocess模块 (5)signal模块 (1)sys模块 sys模块用于Python解释器及其环境 ...

  6. 【转载】【笔记】vue-router之路由传递参数

    参考博客地址:https://blog.51cto.com/4547985/2390799 1.通过<router-link> 标签中的to传参 基本语法: <router-link ...

  7. 关于tomcat对编码不正确的url参数报错的解决

    按照规范,url参数必须使用限定字符,其它字符需要进行编码,用像js的encodeurlcomponent函数. 在IE和360浏览器的兼容模式,不会自动对url的参数进行编码,会导致tomcat报错 ...

  8. [阅读笔记]EfficientDet

    EfficientDet 文章阅读 Google的网络结构不错,总是会考虑计算性能的问题,从mobilenet v1到mobile net v2.这篇文章主要对近来的FPN结构进行了改进,实现了一种效 ...

  9. Python网络爬虫_Scrapy框架_1.新建项目

    在Pycharm中新建一个基于Scrapy框架的爬虫项目(Scrapy库已经导入) 在终端中输入: ''itcast.cn''是为爬虫限定爬取范围 创建完成后的目录 将生成的itcast.py文件移动 ...

  10. 简单的PHP上传图片实例

    分享一个简单的PHP上传图片实例,本实例主要介绍了上传图片的一些限制判断和上传图片的方法. 首先我们在form表单加上上传附件#file,上传按钮#imgbut,记得给form 表单加上multipa ...