angular [ngStyle] [ngClass]的用法
2017-07-27 11:20
821 查看
1、ngStyle
基本用法
判断添加
<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>
2、ngClass
第一个参数为类名称,第二个参数为boolean值,如果为true就添加第一个参数的类
基本用法
判断
3、例子
循环显示的第一行添加text-danger样式,文字变红色
基本用法
<div [ngStyle]="{'background-color':'green'}"></<div>
判断添加
<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>
2、ngClass
第一个参数为类名称,第二个参数为boolean值,如果为true就添加第一个参数的类
基本用法
[ngClass]="{'text-success':true}"
判断
[ngClass]="{'text-success':username == 'zxc'}" [ngClass]="{'text-success':index == 0}"
3、例子
循环显示的第一行添加text-danger样式,文字变红色
const arr = [1, 3, 4, 5, 6] <ul> <li *ngFor="let item of arr, let i = index"> <span [ngClass]="{'text-danger': i==0}">{{item}}</span> </li> </ul>
相关文章推荐
- angular2指令解读:ngFor,ngIf,ngSwitch,ngStyle,ngClass用法
- angular2 [ngStyle] [ngClass]的用法
- AngularJS ng-class用法
- Angular - - ngClass、ngClassEven、ngClassOdd、ngStyle
- AngularJs ngClass、ngClassEven、ngClassOdd、ngStyle
- Angular 学习系列 - - ngClass、ngClassEven、ngClassOdd、ngStyle
- AngularJS ng-class用法
- AngularJS ng-class用法
- angularjs ng-class 两种用法
- AngularJS ng-class用法
- AngularJs ngClass、ngClassEven、ngClassOdd、ngStyle
- angular js ng-change的用法
- angularJS ngClass如何使用
- Angular ng-class详解及实例代码
- angularjs ul li radio span ng-class ng-checked demo
- ngclass expressions in angularjs
- angular [ng-class和ng-model]配对使用,切换背景颜色
- [Angular 2] ng-class and Encapsulated Component Styles
- Angular - ng-repeat高级用法
- 【Angular】ng-disabled的用法;