ng-book札记——内置指令
Angular提供了一些内置指令(directive),这些添加在HTML元素(element)上的特性(attribute)可以赋予更多的动态行为。
NgIf
ngIf指令用于在某个条件下显示或者隐藏元素,该条件取决于传入指令的表达式的结果。
<div *ngIf="false"></div> <!-- 永远不显示 -->
<div *ngIf="a > b"></div> <!-- a大于b时显示 -->
<div *ngIf="str == 'yes'"></div> <!-- str等于"yes"时显示 -->
<div *ngIf="myFunc()"></div> <!-- myFunc返回true时显示 -->
NgSwitch
ngSwitch指令用于处理更复杂的显示逻辑。
<div class="container" [ngSwitch]="myVar">
<div *ngSwitchCase="'A'">Var is A</div>
<div *ngSwitchCase="'B'">Var is B</div>
<div *ngSwitchCase="'C'">Var is C</div>
<div *ngSwitchDefault>Var is something else</div>
</div>
ngSwitchDefault为可选项,如果不加上它,且找不到匹配项时,没有内容将在页面上渲染出来。
NgStyle
ngStyle指令最简洁的方式是[style.<cssproperty>]="value"
这样的形式。
<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>
NgClass
ngClass指令也是一种设置样式的方式,同样也有两种设置办法。
第一种是传递对象字面量(object literal),对象的键是样式的类名,值为布尔类型,指明是否应用样式类。
.bordered {
border: 1px dashed black;
background-color: #eee;
}
<div [ngClass]="{bordered: false}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div>
另一种是直接指定样式类名。
<div class="base" [ngClass]="['blue', 'round']">
This will always have a blue background and
round corners
</div>
ngClass中添加的样式类会与HTML的class特性中已有样式合并,成为最终的'class'结果。
NgFor
ngFor指令用于迭代集合项,其语法为 *ngFor="let item of items"
。
let item
语法指定每次迭代的元素,items
是集合项。
ngFor指令中的集合项可以是对象的数组。
this.people = [
{ name: 'Anderson', age: 35, city: 'Sao Paulo' },
{ name: 'John', age: 12, city: 'Miami' },
{ name: 'Peter', age: 22, city: 'New York' }
];
同时还支持嵌套:
<h4 class="ui horizontal divider header">
Nested data
</h4>
<div *ngFor="let item of peopleByCity">
<h2 class="ui header">{{ item.city }}</h2>
<table class="ui celled table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tr *ngFor="let p of item.people">
<td>{{ p.name }}</td>
<td>{{ p.age }}</td>
</tr>
</table>
</div>
在要获得索引的场合下,只需要稍加变化。
<div class="ui list" *ngFor="let c of cities; let num = index">
<div class="item">{{ num+1 }} - {{ c }}</div>
</div>
NgNonBindable
ngNonBindable指令负责通知Angular,页面上的某块区域不用额外编译。
<div class='ngNonBindableDemo'>
<span class="bordered">{{ content }}</span>
<span class="pre" ngNonBindable>
← This is what {{ content }} rendered
</span>
</div>
上述例子中,第二个span区块里的内容不会被Angualr编译。
ng-book札记——内置指令的更多相关文章
- Angular内置指令(一)
要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突 目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng- ...
- AngularJS内置指令
指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单 ...
- angularJS内置指令一览
基础ng指令 ng-href ng-src ng-disabled ng-readonly ng-checked ng-selected ng-class ng-style ng-show ng-hi ...
- Angular内置指令
记录一下工作中使用到的一些AngularJS内置指令 内置指令:所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突 1. ng-model 使用ng-model实现双向绑定,通过表单的 ...
- AngularJS学习笔记(四)内置指令
说说指令 不得不赞叹,指令是ng最为强大的功能之一,好吧,也可以去掉之一,是最强大的功能.ng内置了许多自定义的指令,这避免了我们自己去造轮子.同时,ng也提供了自定义指令的功能,可以让我们的页面元素 ...
- AngularJs -- 内置指令
AngularJS提供了一系列内置指令.其中一些指令重载了原生的HTML元素,比如<form>和<a>标签, 当在HTML中使用标签时,并不一定能明确看出是否在使用指令. 其他 ...
- Angular中的内置指令和自定义指令
NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...
- angular内置指令相关知识
原文地址 https://www.jianshu.com/p/5a5b43a8e91f 大纲 1.angular指令的分类 2.angular指令之——组件 3.angular指令之——属性指令 (n ...
- 浅谈Angularjs至Angular2后内置指令的变化
一.科普概要说明 我们常说的 Angular 1 是指 AngularJS: 从Angular 2 开始已经改名了.不再带有JS,只是单纯的 Angular: Angular 1.x 是基于JavaS ...
随机推荐
- [洛谷P3383][模板]线性筛素数-欧拉筛法
Description 如题,给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内) Input&Output Input 第一行包含两个正整数N.M,分别表示查询的 ...
- uvalive 5834 Genghis Khan The Conqueror
题意: 给出一个图,边是有向的,现在给出一些边的变化的信息(权值大于原本的),问经过这些变换后,MST总权值的期望,假设每次变换的概率是相等的. 思路: 每次变换的概率相等,那么就是求算术平均. 首先 ...
- NetSNMP开源代码学习——小试牛刀
原创作品,转载请注明出处,严禁非法转载.如有错误,请留言! email:40879506@qq.com 题外话:技术越是古董级的东西,越是值得学习. 一. 配置 参考: http://www.cnbl ...
- Hive函数:rank()、dense_rank()
数据准备: G1,KING, G1,BING, G2,FING, G1,FORD, G2,SCOTT, G1,JONES, G2,BLAKE, G1,CLARK, G1,ALLEN, G1,CELL1 ...
- 解决VS2017编译后的EXE文件不能在其他电脑上运行的问题
笔者昨天写了个超简单画图程序,很是激动啊,立马给同学分享了自己写的程序,结果发现无法运行 错误是这样的 解决方法如下: 1.将Debug改为Release 2.进入[项目]-[**属性] 3.[C/C ...
- Vim+Vundle+YouCompleteMe 安装
这段时间在Centos 7上开发c++程序,想为vim安装YouCompleteMe插件,参照几个博客无果,果断上官网找解决方案.功夫不负苦心人,终于搞定. 学习东西还是要多上官网. 下面送上本次的收 ...
- C#生成MD5码
/// <summary> /// 获取文件的MD5码 /// </summary> /// <param name="fileName">传入 ...
- jade 详解
简介 jade 是HTMl模板引擎,用javascript编写,可以在Node.js中使用.本文主要介绍原生node操作jade文件的方法. 安装 npm install jade 方法(API) ...
- es6-promise源代码重点难点分析
摘要 vue和axios都可以使用es6-promise来实现f1().then(f2).then(f3)这样的连写形式,es6-promise其实现代浏览器已经支持,无需加载外部文件.由于promi ...
- mv&cp
mv [选项] [源] [目标] 当目标不存在时,重命名源为目标 当目标存在时,若目标为目录文件,将源移动到目标文件里: 若目标为非目录文件,将源重命名为目标,并强制覆盖目标. mv -b 1 2 ...