angular2内置指令
2016-04-29 10:11
513 查看
> 1.NgIf
> 2.NgSwitch
当ngIf判断条件过于复杂时用它!
ngSwitchDefault,可选。
ngSwitchWhen可重复匹配
> 3.NgStyle
为DOM设置css属性
> 4.NgClass
还有一些用法待补充!
> 5.NgFor
> 6.NgNonBindable
不编译,渲染纯字符串
<div *ngIf="false"></div> <!-- never displayed --> <div *ngIf="a > b"></div> <!-- displayed if a is more than b --> <div *ngIf="str === 'yes'"></div> <!-- displayed if str holds the string "yes" --> <div *ngIf="myFunc()"></div> <!-- displayed if myFunc returns a true value -->
> 2.NgSwitch
当ngIf判断条件过于复杂时用它!
ngSwitchDefault,可选。
ngSwitchWhen可重复匹配
<div class="container" [ng-switch]="myVar"> <div *ngSwitchWhen="A">Var is A</div> <div *ngSwitchWhen="B">Var is B</div> <div *ngSwitchWhen="C">Var is C</div> <div *ngSwitchWhen="C">Var is C, too</div> <div *ngSwitchDefault>Var is something else</div> </div>
> 3.NgStyle
为DOM设置css属性
//方法一 <div [style.background-color]="'yellow'"> Uses fixed yellow background </div>
//方法二 <div [ngStyle]="{color: 'white', 'background-color': 'blue'}"> Uses fixed white text on blue background </div>
//方法三:可动态赋值 <input type="text" name="color" value="{{color}}" #colorinput> <input type="text" name="fontSize" value="{{fontSize}}" #fontinput> <span [ngStyle]="{color: colorinput.value}">{{ colorinput.value }} text </span> <div [style.background-color]="colorinput.value" style="color: white;"> {{ colorinput.value }} background </div>
> 4.NgClass
//方法一:{key:value},key为类名,value为布尔值,表示该类是否启用 .bordered{ border: 1px dashed black; } <div [ngClass]="{bordered: false}">This is never bordered</div>
//方法二:动态赋值 <div [ngClass]="{bordered: isBordered}"> This is a div with object literal. Border is {{ isBordered ? "ON" : "OFF"}} </div>
还有一些用法待补充!
> 5.NgFor
<div class="ui list" *ngFor="#c of cities;#num = index""> <div class="item">{{num+3}}{{ c }}</div> </div> //cities:数组。c:变量.index:索引
> 6.NgNonBindable
不编译,渲染纯字符串
<span class="pre" ngNonBindable> <- This is what {{ content }} rendered </span> </div>
相关文章推荐
- 一步一步弄懂angularJS基础
- angularJS实践过程中出现的问题总结
- Angular学习记录-显示与隐藏
- AngularJS学习记录-指令复制元素
- [AngularJS] angular-md-table for Angular material design
- angular框架知识积累
- AngularJS中插入HTML片段
- angularjs + fis +modJS 对于支持amd规范的组建处理(PhotoSwipe 支持,百度webUpload支持)
- bootstrap的编辑标记 angularjs input 弹出框
- Directive - Compile vs. Link
- 使用Angularjs、jQuery在手机上实现滑动条到底自动加载更多功能
- 如何在AngularJs中调用第三方插件库
- angular.extend(dst, src)对象拓展
- AngularJS入门之数据验证
- angular.foreach 循环方法使用指南
- 跟我学AngularJs:Aop拦截实例
- Angularjs基础(十)
- angularjs结构
- AngularJS 输入验证
- AngularJS 深入理解 $scope