AngularJS快速入門指南06 過濾器

通過管道字元（『|』），過濾器可以被新增到表示式和指令中。

angularjs過濾器可以被用來轉換（格式化）資料：

過濾器描述

currency

將數字格式化為現金格式。

filter

從乙個集合中選擇子項。

lowercase

將字串轉換為小寫形式。

orderby

通過乙個表示式對集合元素進行排序。

uppercase

將字串轉換為大寫形式。

過濾器可以通過管道字元（『|』）被新增到表示式。

接下來的兩個示例我們將使用在之前的章節中使用過的person控制器。

uppercase過濾器用來將給定的字串轉換成大寫形式：

<

div 
=""ng-controller
="personctrl"
>
<
p>the name is }
p>
div>

lowercase過濾器用來將給定的字串轉換成小寫形式：

<

div 
=""ng-controller
="personctrl"
>
<
p>the name is }
p>
div>

currency過濾器用來將數字格式化為現金格式：

<

div 
=""ng-controller
="costctrl"
>
<
input 
type
="number"
ng-model
="quantity"
>
<
input 
type
="number"
ng-model
="price"
>
<
p>total = }
p>
div>

過濾器也可以通過管道字元（『|』）被新增到指令。

orderby過濾器通過表示式對陣列進行排序：

<

div 
=""ng-controller
="namesctrl"
>
<
ul>
<
li ng-repeat
="x in names | orderby:'country'"
>} 
li>
ul>
<
div>

通過在指令中使用管道字元（『|』），後面緊跟filter加冒號再加上乙個模型的名稱，可以形成乙個輸入過濾器，用來根據使用者輸入的內容對集合進行過濾：

<

div 
=""ng-controller
="namesctrl"
>
<
p><
input 
type
="text"
ng-model
="test"
>
p>
<
ul>
<
li ng-repeat
="x in names | filter:test | orderby:'country'"
>} 
li>
ul>
div>

AngularJS快速入門指南11 事件

angularjs擁有自己的html事件指令。ng click指令定義了angularjs的click事件。div ng controller myctrl button ng click count count 1 click me button p p div 執行 ng hide true 將...

AngularJS快速入門指南01 導言

angularjs使用新的attributes擴充套件了html angularjs對單頁面應用的支援非常好 spas angularjs非常容易學習 本指南旨在幫助你盡可能快速而有效地學習angularjs。通過該指南你會學習到angularjs的一些基本特性，例如指令 表示式 過濾器 模組和控制...

AngularJS快速入門指南01 導言

angularjs使用新的attributes擴充套件了html angularjs對單頁面應用的支援非常好 spas angularjs非常容易學習 本指南旨在幫助你盡可能快速而有效地學習angularjs。通過該指南你會學習到angularjs的一些基本特性，例如指令 表示式 過濾器 模組和控制...