angularjs中的filter(過濾器)

源文地址:http://www.ncloud.hk/技術分享/angularjs中的filter-過濾器/

filters可以用來格式化數據。例如把時間格式化成爲yyyy-MM-dd的形式來呈現給用戶,方便查看。angularjs內置了一些filters,我們也可以根據自己的需要自定義一些filters.

下面是angularjs提供的filters:

currency:格式化一個數字成爲一種貨幣。當沒有提供任何貨幣符號時,使用當前區域的默認符號。

number:格式化數字成爲文本

filter:從數組中選擇一個子集,並將其返回爲一個新數組

date:基於要求的格式格式化日期爲字符串

json:允許你將一個javascript對象轉化爲JSON字符串

lowercase:轉換字符串成爲小寫

uppercase:轉換字符串成爲大寫

limitTo:將數組/字符串限定爲一個指定的元素/字符數。

orderBy:通過給定的表達式指定數組,它是按字母順序排列的字符串和數值。

用法介紹:

html中用法:

filter可以用管道符 | 添加到表達式:{{expression | filter}}

也可以多個filter連用,上一個filter的輸出作爲下一個filter的輸出:

{{expression | filter1 | filter2 |……}}

還可以在指令中用參數:

例如: <li ng-repeat=“x in names | orderBy:’country’”>

或<li ng-repeat=“x in names | filter : ‘i’>

javascript中用法:

例:$scope.formatDate = $filter('date')(today, 'yyyy-MM-dd');

有時候angularjs內置的filter不夠用,我們就可以自己定義一個過濾器。

例如定義一個名爲“myFormat”的過濾器,

<ul ng-app="myApp"ng-controller="namesCtrl">

    <li ng-repeat="x in names">

        {{x | myFormat}}

    </li>

</ul>

<script>

var app = angular.module('myApp', []);

app.filter('myFormat', function() {

    returnfunction(x) {

        var i, c, txt = "";

        x = x.split("")

        for (i = 0; i < x.length; i++) {

            c = x[i];

            if (i % 2 == 0) {

                c = c.toUpperCase();

            }

            txt += c;

        }

        return txt;

    };

});

app.controller('namesCtrl', function($scope) {

    $scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit','Mary', 'Kai'];

});

</script>

這個myFormat過濾器將會格式化其它奇數位的字符爲大寫。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章