这几个都关于样式及类名修改的,所以先把样式代码贴上吧。

  .red{color:red}
.blue{color:blue}

写案例用到的样式就这么简单的两个,下面进入正题。

ngClass

ngClass指令允许在HTML标签上通过绑定一个代表所有将被添加的类的表达式去动态的设定CSS类名。

该指令操作有三种不同的方式,根据三种类型的表达式计算结果为:

  1. 如果表达式计算的结果是个字符串,那么这个字符串就是一个或多个以空格分隔开的类名;
  2. 如果表达式计算的结果是个数组,而且这个数组的元素都是字符串,那么这个数组的每个元素就是一个或多个以空格分隔开的类名;
  3. 如果表达式的计算结果为一个对象,那么对象的每个键值对的相对应的有真实存在的值将会被当作类名。

格式:ng-calss=“value”   ng-calss=“{true:’class-one’,false:“classs-two”}[value]”

value:表达式。

使用代码:

  <input type="button" ng-click="isChecked = !isChecked" value="toggle" />
<span ng-class="{red:isChecked}">Hello World !!!</span>
<span ng-class="{true:'red'}[isChecked]">Hello World !!!</span>

ngClass可以用于一些动态样式的变化,当满足某某某条件需要改变样式的时候(比如:验证不通过时显示红色边框),这种的在项目开发中用到的地方还是较多的。

ngClassEven/ngClassOdd

ngClassEven和ngClassOdd 指令和ngClass工作原理一样,除此之外,他们在ng-repeat里分别对偶(奇)数行有对应的影响。

格式: ng-calss-even=“value”    ng-class-odd=“value”

value:表达式。

使用代码:

  <ol ng-init="items = ['A','B','C','D']">
<li ng-repeat="i in items"><span ng-class-odd="'red'" ng-class-even="'blue'">{{i}}</span></li>
</ol>

上面这串代码返回的结果就是奇数行的是红色字体,偶数行的是蓝色字体,我们在做表格数据的时候或者列表数据的时候用的较多,而且该指令使用也方便。

ngStyle

ngStyle指令允许在HTML元素上设置css样式。

格式:ng-style=“value”    class=”ng-style:value”

value:表达式。

使用代码:

  <div ng-app="Demo">
<div ng-controller="testCtrl as ctrl">
<p ng-style="ctrl.red">Hello World</p>
<p class="ng-style:ctrl.blue">Hello World</p>
</div>
</div>
  (function () {
angular.module("Demo", [])
.controller("testCtrl", testCtrl);
function testCtrl() {
var vm = this;
vm.red = { color: "red" };
vm.blue = { color: "blue" };
};
}());

动态设置css样式,这个指令需要和ngClass区分下,ngClass是动态设置css类名,ngStyle是动态设置css样式。

Angular - - ngClass、ngClassEven、ngClassOdd、ngStyle的更多相关文章

  1. AngularJs ngClass、ngClassEven、ngClassOdd、ngStyle

    这几个都关于样式及类名修改的,所以先把样式代码贴上吧. .red{color:red} .blue{color:blue} 写案例用到的样式就这么简单的两个,下面进入正题. ngClass ngCla ...

  2. 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据

    一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...

  3. JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...

  4. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  5. Nginx 部署、反向代理配置、负载均衡

    Nginx 部署.反向代理配置.负载均衡 最近我们的angular项目部署,我们采用的的是Nginx,下面对Nginx做一个简单的介绍. 为什么选择Nginx 轻:相比于Apache,同样的web服务 ...

  6. AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...

  7. 微软、谷歌、亚马逊、Facebook等硅谷大厂91个开源软件盘点(附下载地址)

    开源软件中有大量专家构建的代码,大大节省了开发人员的时间和成本,热衷于开源的大厂们总是能够带给我们新的惊喜.2016年9月GitHub报告显示,GitHub已经有超过 520 万的用户和超 30 万的 ...

  8. Google、亚马逊、微软 、阿里巴巴开源软件一览

    Google.亚马逊.微软 .阿里巴巴开源软件一览 大公司为什么要发布开源项目?一是开源能够帮助他人更快地开发软件,促进世界创新,主要是社会价值层面的考虑.二是开源能够倒逼工程师写出更好的代码.三是开 ...

  9. Vue系列(一):简介、起步、常用指令、事件和属性、模板、过滤器

    一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...

随机推荐

  1. Java-老夫对泛型的理解。。

    什么是泛型,在我看来 泛型就是能够限制类,方法,数组-变量的类型 比如说  List<String,int> list = new List<String,int> 就是有尖括 ...

  2. javascript 按位或(|),无符号右移(>>>)运算,组合技巧来实现————密码强度提示,四种情况??

    直接上代码,原来的代码中,switch中的第一个case,判断之后,少加了个break 跳出判断语句,害得我查了半天,“怎么样式老是不对,不科学啊,呵呵,原来是没跳出case的判断了,还会执行后面的判 ...

  3. 转 oracle 开发 第03章 sqlplus

    目录 1.查看表结构 desc 2.编辑SQL语句 append.list.change.run 3.保存.检索并运行文件 save.get.start.edit.spool 4.格式化列 colum ...

  4. ViewController加载顺序与self.view

    转载自:http://blog.csdn.net/ishaoc/article/details/42172749   ViewController的加载顺序如下   从Stroyboard和xib中加 ...

  5. iOS的基本图形绘制

    绘图的步骤: 1.获取上下文 2.创建路径(描述路径) 3.把路径添加到上下文 4.渲染上下文 通常在- (void)drawRect:(CGRect)rect这个方法里面绘制图形 为什么要再draw ...

  6. linux下提示bash:command not found

    新安装的linux系统,如果进行精简安装可能会出现bash:command not found 的提示,大家在安装的时候可以选择默认安装basic的组件,一般即可.到时候可以再升级.   如果新装的系 ...

  7. 三列布局,读《css那些事儿》

    1.两列定宽,中间自适应 要点:浮动.负边距效果.mainbox增加内容div并设置margin.:after清除浮动 原理:mainbox的浮动并将其宽度设置为100%,次要内容及侧边栏设置固定宽度 ...

  8. javascript中0.01*2324=23.240000000000002 ?

    js中的乘法运算的小问题 0.01*2324=23.240000000000002 ? , 结果为什么出现这么多小数位呢?

  9. 小P的强力值

    小P的强力值 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi在虚拟世界中有一只小宠物小P.小P有K种属性,每种属性的初始值为Ai.小Ho送给了小Hi若干颗药丸,每 ...

  10. 0115percona-toolkit安装教程

    一.percona-toolkit简介percona-toolkit是一组高级命令行工具的集合,用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务,这些任务包括: 检查master和slav ...