AngularJS中的過濾器filter用法完全解析
在AngularJS的世界里,filter提供了一種格式化數(shù)據(jù)的方法,Angular也提供給我們了很多內(nèi)建的過濾器,并且建立自定義過濾器也是相當(dāng)?shù)暮唵?/p>
在HTML的模板綁定{{}}中,我們使用 | 來調(diào)用過濾器,比如,我們想讓字符串全部大寫字符顯示:
{{ name | uppercase }}
當(dāng)然了,我們也可以在JavaScript中使用$filter服務(wù)來調(diào)用過濾器,還拿字符串大寫來舉例:
app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.name = $filter('lowercase')('Ari'); }]);
如何傳遞參數(shù)到filter呢?只需要把參數(shù)放在filter之后,中間加個冒號(如果有多個參數(shù)要傳遞,在每個參數(shù)后加上冒號)比如,數(shù)字過濾器可以幫助我們限制數(shù)字的位數(shù),如果想顯示兩位小數(shù),加上number:2就可以了
{{ 123.456789 | number:2 }}
filter過濾器主要用來過濾一個數(shù)組數(shù)據(jù)并返回一個包含子數(shù)組數(shù)據(jù)的新數(shù)組。
比如,在客戶端搜索時,我們可以快速的從數(shù)組中過濾出我們想要的結(jié)果。
這個filter方法接收一個string,object,或者function參數(shù)用來選擇/移除數(shù)組元素。
下滿我們具體來看:
一,內(nèi)置的過濾器
1,uppercase,lowercase大小轉(zhuǎn)換
{{ "lower cap string" | uppercase }} //結(jié)果:LOWER CAP STRING {{ "TANK is GOOD" | lowercase }} //結(jié)果:tank is good
|這里的豎線是一種管道功能,如果對linux比較熟悉的話,這塊的|根linux的管道功能,基本是一樣的2,json格式化
{{ {foo: "bar", baz: 23} | json }} //結(jié)果:{ "foo": "bar", "baz": 23 }
注意:bza沒格式前是沒有雙引號的,格式化后就轉(zhuǎn)換成了json數(shù)據(jù)了。
3,date格式化
mysql時間戳 ng-bind="message.time * 1000 | date:'yyyy-mm-dd'"
{{ 1304375948024 | date:'medium'}} //May 03, 2011 06:39:08 PM {{ 1304375948024 | date }} //結(jié)果:May 3, 2011 {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} //結(jié)果:05/03/2011 @ 6:39AM {{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }} //結(jié)果:2011-05-03 06:39:08
4,number格式化
{{ 1.234567 | number:1 }} //結(jié)果:1.2 {{ 1234567 | number }} //結(jié)果:1,234,567
5,currency貨幣格式化
{{ 250 | currency }} //結(jié)果:$250.00 {{ 250 | currency:"RMB ¥ " }} //結(jié)果:RMB ¥ 250.00
6,filter查找 只能查value,不能查key
{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:'s'}} //查找含有有s的行 //上例結(jié)果:[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}] {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:{'name':'ip'} }} //查找name like ip的行 //上例結(jié)果:[{"age":20,"id":10,"name":"iphone"}] $filter('number')(30000, 2); var jsonString = $filter('json')({"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}])
7,limitTo字符串,對像的截取
{{ "i love tank" | limitTo:6 }} //結(jié)果:i love {{ "i love tank" | limitTo:-4 }} //結(jié)果:tank {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | limitTo:1 }} //結(jié)果:[{"age":20,"id":10,"name":"iphone"}]
8,orderBy對像排序
{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id':true }} //根id降序排 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id' }} //根據(jù)id升序排 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:['-age','name'] }}
二,自定filter功能
filter的自定義方式也很簡單,使用module的filter方法,返回一個函數(shù),該函數(shù)接收輸入值,并返回處理后的結(jié)果。
app.filter('過濾器名稱',function(){ return function(需要過濾的對象,過濾器參數(shù)1,過濾器參數(shù)2,...){ //...做一些事情 return 處理后的對象; } });
我找了一個基本angularjs的mvc框架,phonecat,自定義filter也是在這基礎(chǔ)寫的,這個框架挺好用的。
filters.js添加一個module
angular.module('tanktest', []).filter('tankreplace', function() { return function(input) { return input.replace(/tank/, "=====") }; });
html中調(diào)用
{{ "TANK is GOOD" | lowercase |tankreplace}} //結(jié)果:===== is good
注意:| lowercase |tankreplace管道命令可以有多個
yourApp.filter('orderObjectBy', function() { return function(items, field, reverse) { var filtered = []; angular.forEach(items, function(item) { filtered.push(item); }); filtered.sort(function (a, b) { return (a[field] > b[field] ? 1 : -1); }); if(reverse) filtered.reverse(); return filtered; }; });
該過濾器將對象轉(zhuǎn)換成標(biāo)準(zhǔn)的數(shù)組并把它通過您指定字段排序。您可以使用orderObjectBy過濾器酷似ORDERBY,包括字段名后一個布爾值,以指定的順序是否應(yīng)該得到扭轉(zhuǎn)。換句話說,假的是升序,真正的下降。html調(diào)用
<li ng-repeat="item in items | orderObjectBy:'color':true">{{ item.color }}</li>
排序搜索
<input type="text" ng-model="search" class="form-control" placeholder="Search"> <thead> <tr> <!-- ng-class="{dropup:true}" --> <th ng-click="changeOrder('id')" ng-class="{dropup: order === ''}"> 產(chǎn)品編號 <span ng-class="{orderColor: orderType === 'id'}" class="caret"></span> </th> <th ng-click="changeOrder('name')" ng-class="{dropup: order === ''}"> 產(chǎn)品名稱 <span ng-class="{orderColor: orderType === 'name'}" class="caret"></span> </th> <th ng-click="changeOrder('price')" ng-class="{dropup: order === ''}"> 產(chǎn)品價格 <span ng-class="{orderColor: orderType === 'price'}" class="caret"></span> </th> </tr> </thead> <tbody> <tr ng-repeat="item in productData | filter: search | orderBy:order + orderType"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.price | currency: '¥'}}</td> </tr> </tbody>
angularjs
//默認(rèn)排序字段 $scope.orderType = 'id'; $scope.order = '-'; $scope.changeOrder = function(type) { console.log(type); $scope.orderType = type; if ($scope.order === '') { $scope.order = '-'; }else{ $scope.order = ''; } }
- Javascript中關(guān)于Array.filter()的妙用詳解
- JavaScript 數(shù)組some()和filter()的用法及區(qū)別
- jquery.fastLiveFilter.js實現(xiàn)輸入自動過濾的方法
- JavaScript中利用Array filter() 方法壓縮稀疏數(shù)組
- JavaScript之filter_動力節(jié)點Java學(xué)院整理
- 詳解AngularJS中的filter過濾器用法
- Vue.js報錯Failed to resolve filter問題的解決方法
- AngularJS過濾器filter用法總結(jié)
- 詳解AngularJS Filter(過濾器)用法
- JavaScript中filter的用法實例分析
相關(guān)文章
Angular 4依賴注入學(xué)習(xí)教程之組件服務(wù)注入(二)
大家都知道依賴注入式AngularJS的重要特性之一,之前我們已經(jīng)介紹了關(guān)于Angular 4依賴注入基礎(chǔ)的內(nèi)容,下面這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之組件服務(wù)注入的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-06-06angular2 ng2-file-upload上傳示例代碼
這篇文章主要介紹了angular2 ng2-file-upload上傳示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08AngularJS實現(xiàn)動態(tài)切換樣式的方法分析
這篇文章主要介紹了AngularJS實現(xiàn)動態(tài)切換樣式的方法,結(jié)合實例形式分析了AngularJS事件響應(yīng)與樣式動態(tài)控制相關(guān)操作技巧,需要的朋友可以參考下2018-06-06解決angularjs service中依賴注入$scope報錯的問題
今天小編就為大家分享一篇解決angularjs service中依賴注入$scope報錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10AngularJS中取消對HTML片段轉(zhuǎn)義的方法例子
這篇文章主要介紹了AngularJS中取消對HTML片段轉(zhuǎn)義的方法例子,在一些需要顯示HTML的地方,就要取消AngularJS的轉(zhuǎn)義,本文就介紹了這種方法,需要的朋友可以參考下2015-01-01Angular 4環(huán)境準(zhǔn)備與Angular cli創(chuàng)建項目詳解
Angular4.0來了,更小,更快,改動少,所以下面這篇文章主要給大家介紹了關(guān)于Angular 4環(huán)境準(zhǔn)備與學(xué)會使用Angular cli創(chuàng)建項目的相關(guān)資料,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),需要的朋友們下面來一起看看吧。2017-05-05詳解webpack+es6+angular1.x項目構(gòu)建
這篇文章主要介紹了詳解webpack+es6+angular1.x項目構(gòu)建, 小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05