天天看點
傳回

AngularJS快速入門5--過濾器

過濾器

通過某個規則處理接收到的資料，然後傳回處理後的結果，也就是格式化需要展示給使用者的資料。

内置過濾器

1.貨币格式過濾器 currency
           
<html ng-app="my">
    <div ng-controller="myc”>
        原始輸出資料的方法：<span ng-bind="price"></span>
        對于要展示的貨币資料(原始資料就是數字) 按照指定的貨币格式進行輸出:
        貨币過濾器輸出：<span ng-bind="price | currency"></span>
        <span ng-bind="price | currency:'￥'"></span>（注：:'￥'指在價格前加上人民币符号）
        <span ng-bind="price | currency:'￥':3"></span>（注：:3指保留兩位小數）
    </div>
*(重點:  |  為過濾器中的 管道符，如果需要傳遞參數給過濾器，需在參數前面加冒号)*
<script>
    var app=angular.module("my",[]);
    app.controller("myc", ["$scope", function($scope) {
        $scope.price = ;
    }])
</script>
</html>
           
2.日期時間過濾器 date
           
<html ng-app="my">
    <div ng-controller="myc”>
        原始輸出：<span ng-bind="price"></span>
        日期格式化：<span ng-bind="date | date"></span>
        <span ng-bind="date | date:'yyyy年MM月dd日 hh:mm:ss'"></span><br />
        <span ng-bind="date | date:'yyyy年MM月dd日'"></span><br />
        <span ng-bind="date | date:'hh:mm:ss'"></span><br />
    </div>
*(重點:日期格式化：通常情況下，需要按照使用者的要求進行輸出，這時候就會附帶參數y/M/d/h/m/s/E 年/月/日/時/分/秒/星期)*
<script>
    var app=angular.module("my",[]);
    app.controller("myc", ["$scope", function($scope) {
        $scope.date = new Date();
    }])
</script>
</html>
           
3.JSON過濾器 json
           
<html ng-app="my">
    <div ng-controller="myc”>
        <span ng-bind="users|json"></span>
    </div>
*(把資料中的對象，轉換成JSON字元串的格式輸出展示到頁面上，常用于代碼程式調試，使用較少)*
<script>
    var app=angular.module("my",[]);
    app.controller("myc", ["$scope", function($scope) {
         $scope.users = [
            {userID:, username:"cat", nickname:"tom"},
            {userID:, username:"xiaofan", nickname:"張小凡"},
            {userID:, username:"biyao", nickname:"碧瑤"},
            {userID:, username:"luxueqi", nickname:"陸雪琪"},
            {userID:, username:"linjingyu", nickname:"林驚羽"},
            {userID:, username:"cengshushu", nickname:"曾書書"},
            {userID:, username:"zhuque", nickname:"朱雀"},
            {userID:, username:"qinglong", nickname:"青龍"},
            {userID:, username:"guiwang", nickname:"鬼王"},
            {userID:, username:"dushen", nickname:"賭神"},
            {userID:, username:"jinpiner", nickname:"金瓶兒"}
        ]
    }])
</script>
</html>
           
4.filter過濾輸出，可以從給定數組中選擇一個子集，并将其生成一個新數組傳回。
           
<html ng-app="my">
    <div ng-controller="myc”>
        請輸入搜尋關鍵詞：<input type="text" ng-model="keyword"><br />
        <ul>
            <li ng-repeat="u in users | filter:keyword">
                <span ng-bind="u.userID"></span>****
                <span ng-bind="u.username"></span>****
                <span ng-bind="u.nickname"></span>
            </li>
        </ul>
    </div>
<script>
    var app=angular.module("my",[]);
    app.controller("myc", ["$scope", function($scope) {
         $scope.users = [
            {userID:, username:"cat", nickname:"tom"},
            ······數組同上
        ]；
    }])
</script>
</html>
           
5.排序輸出
           
<html ng-app="my">
    <div ng-controller="myc”>
        排序關鍵詞：<input type="text" ng-model="keyword"/>
        排序順序：<input type="checkbox" ng-model="sort"/><br />
        <ul>
            <li ng-repeat="u in users | orderBy:keyword:sort">
                <span ng-bind="u.userID"></span>****
                <span ng-bind="u.username"></span>****
                <span ng-bind="u.nickname"></span>
            </li>
        </ul>
    </div>
<script>
    var app=angular.module("my",[]);
    app.controller("myc", ["$scope", function($scope) {
         $scope.users = [
            {userID:, username:"cat", nickname:"tom"},
            ······數組同上
        ]；
    }])
</script>
</html>
           
6.字元串大小寫轉換過濾器
           
<html ng-app="my">
    <div ng-controller="myc”>
        <div ng-bind="name"></div>
        <div ng-bind="name | uppercase"></div>（轉換為字母全部大寫）
        <div ng-bind="name | lowercase"></div>（字母全部小寫）
    </div>
<script>
    var app=angular.module("my",[]);
    app.controller("myc", ["$scope", function($scope) {
        $scope.name="John Smith";
    }])
</script>
</html>
           
7.長度限制過濾器
           
<html ng-app="my">
    <div ng-controller="myc”>
        長度：<input type="text" ng-model="length"/><br />
        位置：<input type="text" ng-model="index"/><br />（表示從哪裡開始計算長度）
        <ul>
            <li ng-repeat="u in users | limitTo:length:index">
                <span ng-bind="u.userID"></span>****
                <span ng-bind="u.username"></span>****
                <span ng-bind="u.nickname"></span>
            </li>
        </ul>
    </div>
<script>
    var app=angular.module("my",[]);
    app.controller("myc", ["$scope", function($scope) {
       $scope.users = [
            {userID:, username:"cat", nickname:"tom"},
            ······數組同上
        ]；
    }])
</script>
</html>
           
8.number格式化
           
{{1.234567 | number:1}}    結果：1.2
{{1234567 | number}}    結果：1，234，567

*自定義過濾器（重要）

<script>
    var app=angular.module("myapp",[ ]);
    app.filter("myfilter",function(){       
        *（講解：定義一個自定義過濾器，myfilter為過濾器名稱，fn為過濾器處理函數）*
        return function（value）{
        *（過濾器中，直接return function（value）{}，通過閉包函數來實作資料處理，為固定文法結構。value參數，為第一個參數，用于接收要處理的資料，這個資料是過濾器接收到的資料，也就是準備過濾的資料。
        這一部分主要是用來進行資料處理的。）*
        return value；
        *（過濾器中資料處理完成，一定要傳回輸出。）*
        }
    })
</script>
angularjs Angular
上一篇: AngularJS快速入門2--基礎文法
下一篇: RecyclerView條目不能填充的問題

繼續閱讀