AngularJS過濾器filter用法分析

更新時間：2016年12月11日 11:38:47 作者：wangmeijian

這篇文章主要介紹了AngularJS過濾器filter用法,結(jié)合實(shí)例形式分析了過濾器filter的功能、分類、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了AngularJS過濾器filter用法。分享給大家供大家參考，具體如下：

在開發(fā)中，經(jīng)常會遇到這樣的場景

如用戶的性別分為“男”和“女”，在數(shù)據(jù)庫中保存的值為1和0，用戶在查看自己的性別時后端返回的值自然是1或0，前端要轉(zhuǎn)換為“男”或“女”再顯示出來；

如我要換個羽毛球拍，某貓上羽毛球拍的品牌多達(dá)數(shù)十種，我想單獨(dú)查看YONEX這個品牌的羽毛球拍；

買完羽毛球拍我還想買一桶羽毛球，點(diǎn)擊按銷量排序展示商品；

以上三種場景分別對數(shù)據(jù)進(jìn)行了轉(zhuǎn)換／篩選／排序，總而言之就是對數(shù)據(jù)的格式化，AngularJS的filter就是用來做這個事的。

內(nèi)置過濾器

AngularJS內(nèi)置了很多過濾器，在HTML模板的綁定符號{{}}內(nèi)通過｜來調(diào)用過濾器

如字母轉(zhuǎn)換成大寫：

$scope.name='wangmeijian'

{{name | uppercase}}  // 輸出 WANGMEIJIAN

數(shù)字轉(zhuǎn)成千分位寫法：

$scope.num = 12345678

{{num | number}} // 輸出 12,345,678

日期格式化：

$scope.date=new Date()

{{date | date:'yy-MM-dd'}}  // 輸出 2015-11-19

數(shù)字格式化成貨幣：

$scope.num=987654321

{{num | currency:'¥'}}  // 輸出 ¥987,654,321.00

demo示例：http://runjs.cn/code/ztgq7fwg

稍微復(fù)雜一點(diǎn)的過濾器——‘filter'，可以返回給定數(shù)組的子集，它接收一個參數(shù)，這個參數(shù)可以是字符串、對象、函數(shù)

字符串：返回所有包含這個字符串的元素，想要返回不包含這個字符串的元素則在前面加！

demo：

{{['wang','mei','jian'] | filter:'a'}} // 返回包含字母a的元素 ['wang','jian']

對象：Angular會將待過濾對象的屬性與這個對象中的同名屬性進(jìn)行比較，如果屬性值是字符串會判斷是否包含該字符串（注意這里是包含，并不需要完全相等）

demo：

{{ [
  {
    name: 'wangmeijian',
    sex: 'boy'
  },
  {
    name: 'bokeyuan',
    sex: 'sex'
  }
  ] | filter:{
    sex: 'bo'
　　　　}
}}
// 輸出 [{"name":"wangmeijian","sex":"boy"}]

函數(shù)：對每個元素都執(zhí)行該函數(shù)，返回非假值的元素會出現(xiàn)在新的數(shù)組中并返回

demo：

$scope.getNumber = function(n){
　　return !isNaN(n);
}
{{ ['demo',2,3] | filter:getNumber}} // 輸出 [2,3]

自定義過濾器

當(dāng)內(nèi)置函數(shù)不能滿足你的業(yè)務(wù)需求時，就需要自定義一個過濾器，自定義過濾器返回一個函數(shù)，函數(shù)的參數(shù)就是HTML模板中|左側(cè)的數(shù)據(jù)，它會自動傳入過濾器中

比如需求是將一句話中的每個單詞首字母變成大寫

<html ng-app='app'>
  <head>
    <title>AngularJS過濾器filter入門</title>
    <script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.5.0-beta.1/angular.js"></script>
  </head>
  <body ng-controller='myController'>
    <p>{{ str | capitalize}}</p>
    <!-- 輸出 Hello, Welcome To Bokeyuan! -->
    <script type="text/javascript">
    var app = angular.module('app',[])
    .controller('myController',['$scope', function($scope){
      $scope.str = 'hello, welcome to bokeyuan!'
    }])
    .filter('capitalize', function(){
      return function(str){
        var arr = str.split(/\s+/);
        for (var i = 0; i < arr.length; i++) {
          arr[i] = arr[i].substr(0,1).toUpperCase() + arr[i].slice(1);
        };
        return arr.join(" ")
      }
    })
    </script>
  </body>
</html>

需要注意的是，內(nèi)置過濾器‘filter'的參數(shù)是函數(shù)時，會對數(shù)組的每個元素執(zhí)行該函數(shù)，自定義過濾器是對數(shù)組對象執(zhí)行它return的函數(shù)。

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: