亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

AngularJS過(guò)濾器filter用法分析

 更新時(shí)間：2016年12月11日 11:38:47   作者：wangmeijian  
這篇文章主要介紹了AngularJS過(guò)濾器filter用法,結(jié)合實(shí)例形式分析了過(guò)濾器filter的功能、分類(lèi)、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下

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

在開(kāi)發(fā)中，經(jīng)常會(huì)遇到這樣的場(chǎng)景

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

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

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

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

內(nèi)置過(guò)濾器

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

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

$scope.name='wangmeijian'

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

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

$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)的過(guò)濾器——‘filter'，可以返回給定數(shù)組的子集，它接收一個(gè)參數(shù)，這個(gè)參數(shù)可以是字符串、對(duì)象、函數(shù)

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

demo：

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

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

demo：

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

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

demo：

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

自定義過(guò)濾器

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

比如需求是將一句話(huà)中的每個(gè)單詞首字母變成大寫(xiě)

<html ng-app='app'>
  <head>
    <title>AngularJS過(guò)濾器filter入門(mén)</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)置過(guò)濾器‘filter'的參數(shù)是函數(shù)時(shí)，會(huì)對(duì)數(shù)組的每個(gè)元素執(zhí)行該函數(shù)，自定義過(guò)濾器是對(duì)數(shù)組對(duì)象執(zhí)行它return的函數(shù)。

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

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

相關(guān)文章

最新評(píng)論