AngularJS 講解，三 過濾器

過濾器用來格式化須要展現給用戶的數據。AngularJS有不少實用的內置過濾器，同時也提
供了方便的途徑能夠本身建立過濾器。

在HTML中的模板綁定符號{{ }}內經過|符號來調用過濾器。例如:{{value|lowercase}}//將值轉換成小寫

在JavaScript代碼中能夠經過$filter來調用過濾器

例：

　　app.controller('DemoController', ['$scope', '$filter',
　　function($scope, $filter) {
　　$scope.name = $filter('lowercase')('Ruby');
　　}]);

以HTML的形式使用過濾器時，若是須要傳遞參數給過濾器，只要在過濾器名字後面加冒號
便可。若是有多個參數，能夠在每一個參數後面都加入冒號。

例如

　　{{0.23145|number:3}}

顯示值:0.231//數值過濾器 能夠限制小數點後的位數（在過濾器後寫上2,將2做爲參數傳遞給過濾器)

能夠用|符號做爲分割符來同時使用多個過濾器

一：下面介紹AngularJS提供的內置過濾器：

 1.currecy過濾器能夠將一個數值格式化爲貨幣格式。用{{ 50| currency }}來將50轉化

成貨幣格式。
currecy過濾器容許咱們本身設置貨幣符號。默認狀況下會採用客戶端所處區域的貨幣符號，
可是也能夠自定義貨幣符號。

2.date過濾器能夠將日期格式化成須要的格式。AngularJS中內置了幾種日期格式，若是沒有

指定使用任何格式，默認會採用mediumDate格式

下面是內置的支持本地化的日期格式：

{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ today | date:'short' }} <!-- 8/9/1312:09PM -->
{{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->
{{ today | date:'longDate' }} <!-- August 09, 2013 -->
{{ today | date:'mediumDate' }}<!-- Aug 09, 2013 -->
{{ today | date:'shortDate' }} <!-- 8/9/13 -->
{{ today | date:'mediumTime' }}<!-- 12:09:02 PM -->
{{ today | date:'shortTime' }} <!-- 12:09 PM -->

 年份格式化

四位年份：{{ today | date:'yyyy' }} <!-- 2013 -->
兩位年份：{{ today | date:'yy' }} <!-- 13 -->
一位年份：{{ today | date:'y' }} <!-- 2013 -->

月份格式化

英文月份：{{ today | date:'MMMM' }} <!-- August -->
英文月份簡寫：{{ today | date:'MMM' }} <!-- Aug -->
數字月份：{{ today |date:'MM' }} <!-- 08 -->
一年中的第幾個月份：{{ today |date:'M' }} <!-- 8 -->

日期格式化

數字日期：{{ today|date:'dd' }} <!-- 09 -->

一個月中的第幾天：{{ today | date:'d' }} <!-- 9 -->

英文星期：{{ today | date:'EEEE' }} <!-- Thursday -->
英文星期簡寫：{{ today | date:'EEE' }} <!-- Thu -->

小時格式化

24小時制數字小時：{{today|date:'HH'}} <!--00-->
一天中的第幾個小時：{{today|date:'H'}} <!--0-->
12小時制數字小時：{{today|date:'hh'}} <!--12-->
上午或下午的第幾個小時：{{today|date:'h'}} <!--12-->

分鐘格式化

數字分鐘數：{{ today | date:'mm' }} <!-- 09 -->
一個小時中的第幾分鐘：{{ today | date:'m' }} <!-- 9 -->

秒數格式化

數字秒數：{{ today | date:'ss' }} <!-- 02 -->
一分鐘內的第幾秒：{{ today | date:'s' }} <!-- 2 -->
毫秒數：{{ today | date:'.sss' }} <!-- .995 -->

字符格式化

上下午標識：{{ today | date:'a' }} <!-- AM -->
四位時區標識：{{ today | date:'Z' }} <!--- 0700 -->

自定義日期格式示例：

{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 -->
{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8-->
{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->

3.filter

  filter過濾器能夠從給定數組中選擇一個子集，並將其生成一個新數組返回。這個過濾器一般用來過濾須要進行展現的元素。

  這個過濾器的第一個參數能夠是字符串、對象或是一個用來從數組中選擇元素的函數。

 1)傳入的參數是字符串時

    返回全部包含這個字符串的元素。若是咱們想返回不包含該字符串的元素，在參數前加!符號。

   例：

      {{ ['Bri','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}

　　<!-- ["Lerner","Likes","Eat"] -->

2)傳入的參數是對象

   AngularJS會將待過濾對象的屬性同這個對象中的同名屬性進行比較，若是屬性值是字符串就會判斷是否包含該字符串。若是咱們但願對所有屬性都進行對比，能夠將$看成鍵名。

例：

　　{{ [{
　　　　　　'name': 'Ari',
　　　　　　'City': 'San Francisco',
　　　　　　'favorite food': 'Pizza'
　　　　},{
　　　　　　'name': 'Nate',
　　　　　　'City': 'San Francisco',
　　　　　　'favorite food': 'indian food'
　　}] | filter:{'favorite food': 'Pizza'} }}
<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

3)函數

   對每一個元素都執行這個函數，返回非假值的元素會出如今新的數組中並返回。

  自定義函數進行過濾（在這個例子中函數定義在$scope上）：

  {{ ['Ari','likes','to','travel'] | filter:isCapitalized }}

　<!-- ["Ari"] -->
   isCapitalized函數的功能是根據首字母是否爲大寫返回true或false，具體以下所示：
  $scope.isCapitalized = function(str) {
 return str[0] == str[0].toUpperCase();
 };
4.json

　　json過濾器能夠將一個JSON或JavaScript對象轉換成字符串。這種轉換對調試很是有幫助：
　　{{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }}
　　<!--
　　　　{
　　　　　　"name": "Ari",
　　　　　　"City": "San Francisco"
　　　　}
　　-->

5.limitTo

　limitTo過濾器會根據傳入的參數生成一個新的數組或字符串，新的數組或字符串的長度取決於傳入的參數，經過傳入參數的正負值來控制從前面仍是從後面開始截取。(若是傳入的長度值大於被操做數組或字符串的長度，那麼整個數組或字符串都會被返回。)

例子：

   {{ San Francisco is very cloudy | limitTo:3 }}

    <!-- San -->

   {{ San Francisco is very cloudy | limitTo:-6 }}

   <!-- cloudy -->

 對數組也能夠進行一樣的操做。返回數組的第一個元素：
　　{{ ['a','b','c','d','e','f'] | limitTo:1 }}
　　<!-- ["a"] -->

6 lowercase

  lowercase過濾器將字符串轉爲小寫。

7.number

  number過濾器將數字格式化成文本。它的第二個參數是可選的，用來控制小數點後截取的位數。(若是傳入了一個非數字字符，會返會空字符串。)

8.orderBy

  orderBy過濾器能夠用表達式對指定的數組進行排序。

  orderBy能夠接受兩個參數，第一個是必需的，第二個是可選的。

  第一個參數是用來肯定數組排序方向的謂詞。

 下面分狀況討論第一個參數的類型。
　　 函數
　　當第一個參數是函數時，該函數會被看成待排序對象的getter方法。
　　 字符串
　　對這個字符串進行解析的結果將決定數組元素的排序方向。咱們能夠傳入+或-來強制進行升
　　序或降序排列。
　　 數組
　　在排序表達式中使用數組元素做爲謂詞。對於與表達式結果並不嚴格相等的每一個元素，則使
　　用第一個謂詞。

 第二個參數用來控制排序的方向（是否逆向）。

  例:

　　{{ [{

　　　　'name': 'Ari',
　　　　'status': 'awake'
　　　},{
　　　　'name': 'Q',
　　　　'status': 'sleeping'
　　},{
　　　　'name': 'Nate',
　　　　'status': 'awake'
　　}] | orderBy:'name' }}
　　<!--
　　　　[
　　　　{"name":"Ari","status":"awake"},
　　　　{"name":"Nate","status":"awake"},
　　　　{"name":"Q","status":"sleeping"}
　　　　]　　
　　-->

 對排序結果進行反轉(經過將第二個參數設置爲true能夠將排序結果進行反轉：orderBy:'name':true)

9.uppercase

 uppercase過濾器能夠將字符串轉換爲大寫形式：

 二：自定義過濾器

 建立自定義過濾器須要將它放到本身的模塊中。

下面舉例說明：

 將name以首字母大寫形式顯示

<!DOCTYPE html>
<html>
<head>
    <title>Custom Filter</title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app="customFilter" ng-controller="filterController">
    <h1>{{name|lowercase|Capitalize}}</h1>
    <script type="text/javascript" src="customfilter.js"></script>
</body>
</html>

customfilter.js

(function () {
    var app = angular.module('customFilter', []);
    app.controller('filterController', function ($scope) {
        $scope.name = 'JACK';
    });
    app.filter('Capitalize', function () {
        return function (input) {
            if (input) {
                return input[0].toUpperCase() + input.slice(1);
            }
        };
    });
})();