AngularJS Tutorial(6)from w3school
来源:互联网 发布:网络流行语2016英文 编辑:程序博客网 时间:2024/06/06 02:40
Filters can be added to expressions and directives using a pipe character.
AngularJS Filters
AngularJS filters can be used to transform data:
Adding Filters to Expressions
A filter can be added to an expression with a pipe character (|) and a filter.
(For the next two examples we will use the person controller from the previous chapter)
The uppercase filter format strings to upper case:
AngularJS Example
<p>The name is{{ lastName | uppercase }}</p>
</div>
Try it Yourself »
The lowercase filter format strings to lower case:
AngularJS Example
<p>The name is{{ lastName | lowercase }}</p>
</div>
Try it Yourself »
The currency Filter
The currency filter formats a number as currency:
AngularJS Example
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>Total ={{ (quantity * price) | currency }}</p>
</div>
Try it Yourself »
Adding Filters to Directives
A filter can be added to a directive with a pipe character (|) and a filter.
The orderBy filter orders an array by an expression:
AngularJS Example
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<div>
Try it Yourself »
Filtering Input
An input filter can be added to a directive with a pipe character (|) and filter followed by a colon and a model name.
The filter filter selects a subset of an array:
AngularJS Example
<p><inputtype="text"ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
Try it Yourself »
- AngularJS Tutorial(6)from w3school
- AngularJS Tutorial(1)from w3school
- AngularJS Tutorial(2)from w3school
- AngularJS Tutorial(3)from w3school
- AngularJS Tutorial(4)from w3school
- AngularJS Tutorial(5)from w3school
- AngularJS Tutorial(7)from w3school
- AngularJS Tutorial(8)from w3school
- AngularJS Tutorial(9)from w3school
- AngularJS Tutorial(10)from w3school
- AngularJS Tutorial(11)from w3school
- AngularJS Tutorial(12)from w3school
- AngularJS Tutorial(13)from w3school
- AngularJS Tutorial(14)from w3school
- AngularJS Tutorial(15)from w3school
- AngularJS Tutorial(16)from w3school
- AngularJS Tutorial(17)from w3school
- AngularJS Tutorial(18)from w3school
- Linux进程间通信之管道
- AngularJS Tutorial(5)from w3school
- 【转】GDB调试方法汇总
- python调试
- 高效画圆角的方法
- AngularJS Tutorial(6)from w3school
- GdiplusFlat(4)单色画刷 和 线性渐变画刷
- PowerDesigner生成SQL脚本时,对象带有双引号的问题解决
- 32位和64位下Myeclipse、Tomcat以及JDK三者关系详解
- AngularJS Tutorial(7)from w3school
- AngularJS Tutorial(8)from w3school
- SPOJ COT 10628 Count on a tree
- 什么是好软件
- Objective-C中的一些特殊的数据类型