Using ngClass for conditional styling, here is the usage from the docs:

/**
* @ngModule CommonModule
*
* @usageNotes
* ```
* <some-element [ngClass]="'first second'">...</some-element>
*
* <some-element [ngClass]="['first', 'second']">...</some-element>
*
* <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
*
* <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
*
* <some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
* ```
*
* @description
*
* Adds and removes CSS classes on an HTML element.
*
* The CSS classes are updated as follows, depending on the type of the expression evaluation:
* - `string` - the CSS classes listed in the string (space delimited) are added,
* - `Array` - the CSS classes declared as Array elements are added,
* - `Object` - keys are CSS classes that get added when the expression given in the value
* evaluates to a truthy value, otherwise they are removed.
*
* @publicApi
*/

It is also recommended when the conditional logics is complicated, we can using Function:

<div [ngClass]="getCondClass(i)" *ngFor="let item of items as collection; index as i; first as isFirst; last as isLast; even as isEven; odd as isOdd;">
{{i + 1}}: {{item}} -- {{collection}}
</div>
  getCondClass (index) {
if (index + === ) {
// Using array to add 'third', 'very*important' classes
return ['third', 'very-important'];
} if (index === this.items.length - ) {
// Using string to add class
return 'last';
} if (index === ) {
// Using object to add class
return {'first': true};
}
}

[Angular] ngClass conditional的更多相关文章

  1. angular ng-class使用笔记

    在前面Angularjs开发一些经验总结中说到在angular开发中angular controller never 包含DOM元素(html/css),在controller需要一个简单的POJO( ...

  2. Angular - - ngClass、ngClassEven、ngClassOdd、ngStyle

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

  3. angular [NgClass] [NgStyle],NgIf,[ngSwitch][ngSwitchCase]

    [NgClass]  CSS 类会根据表达式求值结果进行更新,更新逻辑取决于结果的类型: string - 会把列在字符串中的 CSS 类(空格分隔)添加进来, Array - 会把数组中的各个元素作 ...

  4. angular -- ng-class该如何使用?

    ng-class是一个判断是否给某一个元素添加类名的属性: 例如:下面是判断 是否添加 aHover 这个类名: <ul class="nav fl w120 o"> ...

  5. AngularJS 的表单验证

    最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validatio ...

  6. 一步一步弄懂angularJS基础

    问题1:ng-app指令的使用以及自定义指令 <!doctype html> <!--这里的ng-app的属性值就是模块的名称,也就是 angular.module("My ...

  7. 浅谈Angularjs至Angular2后内置指令的变化

    一.科普概要说明 我们常说的 Angular 1 是指 AngularJS: 从Angular 2 开始已经改名了.不再带有JS,只是单纯的 Angular: Angular 1.x 是基于JavaS ...

  8. angular学习之关于ng-class详解

    1,定义和用法 ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类. ng-class 指令的值可以是字符串,对象,或一个数组. 如果是字符串,多个类名使用空格分隔. 如果是对 ...

  9. angular的ng-class

    项目内想到要替换class时,第一反应是使用angular最为简单粗暴的class改变方式: 在angular中为我们提供了3种方案处理class:        1:scope变量绑定,如上例.(不 ...

随机推荐

  1. HDU 5690 矩阵快速幂

    All X Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submi ...

  2. FPGA 日积月累

    Nios II 13.1中,使用Qsys生成的cpu中断号默认为-1,因此中断无法注册.解决方法:手动修改中断模块的tcl文件如下: add_interface interrupt_sender in ...

  3. post传参部分数据丢失

    tomcat获取post传的参数,只接收到前半部分参数,后半部分参数没有接收到 可能的原因是: tomcat中maxParameterCount是用来限制请求中的最大参数量,默认是10000,如果超过 ...

  4. 孙鑫 VC++深入详解第14课——TCP通信/UDP通信(转)

    原文转自 http://blog.csdn.net/supersonico/article/details/18900319 一.用VC++来编写TCP 服务器/客户端的简单程序. 注意事项: 1.要 ...

  5. Autotools Mythbuster

    Preface Diego Elio "Flameeyes" Pettenò Author and Publisher <flameeyes@flameeyes.eu> ...

  6. redis 单机模拟 cluster集群

    一.redis-cluster设计 Redis集群搭建的方式有多种,例如使用zookeeper等,但从redis 3.0之后版本支持redis-cluster集群,Redis-Cluster采用无中心 ...

  7. MVC如何在路由器(RouteConfig)定义后缀.html

    一.配置文件web.config添加一下设置 <system.webServer> <modules runAllManagedModulesForAllRequests=" ...

  8. ubuntu 开启PHP CURL支持

    sudo apt-get install php5-curl sudo service apache2 restart

  9. Codeforces 581F Zublicanes and Mumocrates(树型DP)

    题目链接  Round 322 Problem F 题意  给定一棵树,保证叶子结点个数为$2$(也就是度数为$1$的结点),现在要把所有的点染色(黑或白) 要求一半叶子结点的颜色为白,一半叶子结点的 ...

  10. FZU-2270 Two Triangles(两个三角形全等)

    原题地址: 题意: 给出n个点,有两个人,每个人可以选3个点,问有多少种情况是可以找出两个三角形,是可以通过旋转使其全等.   思路: 所以首先要是三角形即三点不能共线,其次要全等,即三条边对应相等, ...