AngularJS過濾器filter用法分析_AngularJS

來源:互聯網
上載者:User

本文執行個體講述了AngularJS過濾器filter用法。分享給大家供大家參考,具體如下:

在開發中,經常會遇到這樣的情境

如使用者的性別分為“男”和“女”,在資料庫中儲存的值為1和0,使用者在查看自己的性別時後端返回的值自然是1或0,前端要轉換為“男”或“女”再顯示出來;

如我要換個羽毛球拍,某貓上羽毛球拍的品牌多達數十種,我想單獨查看YONEX這個品牌的羽毛球拍;

買完羽毛球拍我還想買一桶羽毛球,點擊按銷量排序展示商品;

以上三種情境分別對資料進行了轉換/篩選/排序,總而言之就是對資料的格式化,AngularJS的filter就是用來做這個事的。

內建過濾器

AngularJS內建了很多過濾器,在HTML模板的綁定符號{{}}內通過|來調用過濾器

如字母轉換成大寫:

$scope.name='wangmeijian'{{name | uppercase}}  // 輸出 WANGMEIJIAN

數字轉成千分位寫法:

$scope.num = 12345678{{num | number}} // 輸出 12,345,678

日期格式化:

$scope.date=new Date(){{date | date:'yy-MM-dd'}}  // 輸出 2015-11-19

數字格式化成貨幣:

$scope.num=987654321{{num | currency:'¥'}}  // 輸出 ¥987,654,321.00

demo樣本:http://runjs.cn/code/ztgq7fwg

稍微複雜一點的過濾器——‘filter',可以返回給定數組的子集,它接收一個參數,這個參數可以是字串、對象、函數

字串:返回所有包含這個字串的元素,想要返回不包含這個字串的元素則在前面加!

demo:

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

對象:Angular會將待過濾對象的屬性與這個對象中的同名屬性進行比較,如果屬性值是字串會判斷是否包含該字串(注意這裡是包含,並不需要完全相等)

demo:

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

函數:對每個元素都執行該函數,返回非假值的元素會出現在新的數組中並返回

demo:

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

自訂過濾器

當內建函數不能滿足你的業務需求時,就需要自訂一個過濾器,自訂過濾器返回一個函數,函數的參數就是HTML模板中|左側的資料,它會自動傳入過濾器中

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

<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>

需要注意的是,內建過濾器‘filter'的參數是函數時,會對數組的每個元素執行該函數,自訂過濾器是對數組對象執行它return的函數。

更多關於AngularJS相關內容感興趣的讀者可查看本站專題:《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

希望本文所述對大家AngularJS程式設計有所協助。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.