[Angularjs]過濾器

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>過濾器</title>
    <meta charset="utf-8" />
    <script src="JS/angular.min.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('FilterController', function ($scope) {
        });

    </script>
</head>
<body>
    <div ng-controller="FilterController">
        <ul>
            <li>
                <!-- currecy過濾器能夠將一個數值格式化爲貨幣格式 -->
                currency:{{1023|currency}}
            </li>
        </ul>
    </div>
</body>
</html>

date

date過濾器能夠將日期格式化成須要的格式。AngularJS中內置了幾種日期格式，若是沒有指定使用任何格式，默認會採用mediumDate格式。

    <script>
        var app = angular.module('app', []);
        app.controller('FilterController', function ($scope) {
            $scope.today = new Date();
        });
    </script>

            <li>
                {{today}}<br />
                {{today|date:'medium' }}<br />
                {{today|date:'short'}}<br />
                {{today|date:'fullDate'}}<br />
                {{today|date:'longDate'}}<br />
                {{today|date:'mediumDate'}}<br />
                {{today|date:'shortDate'}}<br />
                {{today|date:'mediumTime'}}<br />
                {{today|date:'shortTime'}}<br />
            </li>

  <strong>年份格式化</strong><br />
                四位年份:{{today|date:'yyyy'}}<br />
                兩位年份:{{today|date:'yy'}}<br />
                一位年份:{{today|date:'y'}}<br />
                <strong>月份格式化</strong> <br />
                英文月份:{{today|date:'MMMM'}}<br />
                英文月份簡寫:{{today|date:'MMM'}}<br />
                數字月份:{{today|date:'MM'}}<br />
                一年中的第幾個月份:{{today|date:'M'}}<br />
                <strong>日期格式化</strong>  <br />
                數字日期:{{today|date:'dd'}}<br />
                一個月中的第幾天:{{today|date:'d'}}<br />
                英文星期:{{today|date:'EEEE'}}<br />
                英文星期簡寫: {{today|date:'EEE'}}<br />
                <strong>小時格式化</strong>  <br />
                24小時制數字小時:{{today|date:'HH'}}<br />
                一天中的第幾個小時:{{today|date:'H'}}<br />
                12小時制數字小時: {{today|date:'hh'}}<br />
                上午或下午的第幾個小時:{{today|date:'h'}}<br />
                <strong>分鐘格式化</strong> <br />
                數字分鐘數:{{today|date:'mm'}}<br />
                一個小時中的第幾分鐘:{{today|date:'m'}}<br />
                <strong>秒數格式化</strong> <br />
                數字秒數:{{today|date:'ss'}}<br />
                一分鐘內的第幾秒:{{today|date:'s'}}<br />
                毫秒數: {{today|date:'sss'}}<br />
                <strong>字符格式化</strong>  <br />
                上下午標識:{{today|date:'a'}}<br />
                四位時區標識:{{today|date:'Z'}}<br />

若是顯示2015-08-23格式的日期，能夠這樣寫日期格式化格式：

  {{today|date:'yyyy-MM-dd'}}

filter

filter過濾器能夠從給定的數據源中選擇一個子集，並將其生成一個新的數據源返回。這個過濾器一般用來過濾須要進行展現的元素。好比，在搜索中，能夠從一個數組中馬上過濾出所需的結果。這個過濾器的第一個參數能夠是字符串，對象或一個用來從數組中選擇的函數。

filter過濾器第一個參數：

字符串：返回全部包含這個字符串的元素。若是咱們想返回不包含這個字符串的元素，在參數前加!符號。
對象：Angularjs會將待過濾對象的屬性同這個對象中的同名屬性進行比較，若是屬性值是字符串就會判斷是否包含該字符串。若是咱們但願對所有屬性進行對比，能夠將$看成鍵名。
函數

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

            <li>
                <!-- 只輸出包含a的字符串 -->
                {{['addf','wolfy','ss','adf']|filter:'a'}}
                <!-- 只輸出不包含a的字符串 -->
                {{['addf','wolfy','ss','adf']|filter:'!a'}}
            </li>

                <!-- 對象 -->
                {{ [{'id':1,'name':'wolfy','age':21},{'id':2,'name':'zhangsan','age':22}]|filter:{'$':'wolfy'} }}

也能夠自定義一個函數進行過濾，好比輸出年齡大於21的對象。

{{[{'id':1,'name':'wolfy','age':21},{'id':2,'name':'zhangsan','age':22}]|filter:ageThan21 }}

$scope.ageThan21 = function (p) {
                console.log(p);
                if (p.age > 21) {
                    return p;
                };
            };

第二個參數：

true:使用angular.equals(expected,actual)對兩個值進行嚴格比較。

false:進行區別大小寫的字符串比較。

函數：運行這個函數，若是返回真值就接受這個元素。

json

json過濾器能夠將一個json或javascript對象轉換成字符串。

                <!-- json過濾器 -->
                {{ {'id':1,'name':'wolfy','age':21}|json }}

limitTo

limitTo過濾器會根據傳入的參數生成一個新的數組或字符串，新的數組或字符串的長度取決於傳入的參數，經過傳入參數的正負值來控制從前面仍是從後面開始截取。

注意

若是傳入的長度值大於被操做的數組或字符串的長度，那麼整個字符串或數組都會被返回。

                <!-- limitTo過濾器 -->
                {{"Hello World"|limitTo:5}}
                {{"Hello World"|limitTo:-5}}

對於數組，使用limitTo過濾器，下標是從1開始的，好比：

 {{ ['a','b','c','d','e','f'] | limitTo:1 }}

lowercase

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

               <!-- lowercase過濾器 -->
                {{'HELLO WORLD'|lowercase}}
                <!--  hello world -->

uppercase

uppercase 過濾器能夠將字符串轉換爲大寫。

number

number過濾器將數字格式化爲文本，第二個參數是可選的，用來控制小數點後截取的位數。

注意

若是傳入一個非數字字符，會返回空字符串。

                <!-- number過濾器 -->
                {{ 123456789 | number }}
                {{3.14121214|number:2}}

orderBy

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

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

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

第一個參數能夠爲函數，字符串，數組。

函數：該函數做爲排序對象的getter方法。
字符串：對這字符串進行解析的結果將決定數組元素的排序方向。能夠傳入+或者-來進行強制升序或者降序。
數組：在排序表達式中使用數組元素做爲謂詞。對於與表達式結果並不嚴格相等的每一個元素，則使用第一個謂詞。

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

按name進行排序：

           <li>
                <!-- oderBy過濾器 -->
                {{[{'id':1,'name':'wolfy','age':21},{'id':2,'name':'zhangsan','age':22}]|orderBy:'name' }}
            </li>

能夠經過第二個參數對結果進行反轉，

           <li>
                <!-- oderBy過濾器 -->
                {{[{'id':1,'name':'wolfy','age':21},{'id':2,'name':'zhangsan','age':22}]|orderBy:'name'：true }}
            </li>

以上就是angularjs內置的過濾器，但有時上面的過濾器並不能知足咱們的需求，能不能本身定義過濾器呢？答案是確定的，而且實現起來很是簡單。

自定義過濾器

自定義的過濾器有點相似上面的filter過濾器，下面舉一個例子，對比一下。

咱們如今實現一個自定義過濾器，將一個句子的首字母轉換爲大寫。

        app.filter('changeFirstUpper', function () {
            return function (input) {
                console.log('changeFirstUpper');
                console.log(input);
                var newArr = [];
                if (input) {
                    var arr = input.split(' ');
                    for (var i = 0; i < arr.length; i++) {
                        arr[i] = arr[i][0].toUpperCase() + arr[i].slice(1);
                        newArr.push(arr[i]);
                    };
                    return newArr.join(' ');
                };
            };
        });

<!-- 自定義過濾器 -->
{{'the last one the best one'|changeFirstUpper}}

總結

angularjs的過濾器內容到此結束，在實際項目中仍是比較經常使用的。

參考

Angularjs權威教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。