引言在表達式中使用過濾器1 currency過濾器的使用2 lowercase過濾器的使用3 uppercase過濾器的使用4 json過濾器的使用5 data過濾器的使用6 number過濾器的使用7 limitTo過濾器的使用8 orderBy過濾器的使用9 filter過濾器的使用過濾器在指令中的使用過濾器在服務中的使用js代碼中使用1 lowercase過濾器2 json過濾器3 uppercase過濾器4 limitTo過濾器5 date過濾器6 currency過濾器7 number過濾器8 orderBy過濾器9 filter過濾器10 過濾器在js對象使用總結
在本篇博客中主要介紹一下AngularJS過濾器，過濾器主要應用于表達式，部分指令，過濾器還可以應用在控制器中（過濾器服務），AngularJS一共給我們提供了9種過濾器，分別為：currency,date,filter,json,limitTo,lowercase,number,orderBy,uppercase,首先我們看一下這個每一種過濾器所起到的作用：
currency：格式化數字為貨幣形式date：格式化date對象到字符串filter：從array中選擇一個條目子集，并作為一個新數組返回json：允許轉換一個javaScript對象到JSON字符串limitTo：截取字符串lowercase ：轉換字符串為小寫形式。number : 格式化數字到文本。orderBy：字符串按照字母排序uppercase：轉換字符串到大寫形式。上述九種過濾器便是AngularJS提供的過濾器，接下來我們就來看看過濾器的各種用法。
currency過濾器的使用 currency過濾器主要用于貨幣的格式化，它的使用方式為：{{ currency_exPRession | currency : symbol}}
currency_expression：表示AngularJS表達式currency：代表使用 currency過濾器symbol：是一個可選參數，如果不寫，默認是美元符。我們看一下這個過濾器的使用，代碼如下：
如果不寫symbol參數 {{100|currency}} //輸出結果為：$100.00如果寫symbol參數（也就是說：symbol參數控制貨幣的符號）{{100|currency:'&&&&'}} //輸出結果為：&&&&100.00{{100|currency:'￥'}} //輸出結果為：￥100.00lowercase過濾器的使用{{ uppercase_expression | lowercase}}，代碼如下：//注意這里寫的是字符串{{'ABCD'|lowercase}}//輸出結果為：abcduppercase過濾器的使用{{ uppercase_expression | uppercase}}，代碼如下：{{'abcd'|uppercase}}//輸出結果為：ABCDjson過濾器的使用{{ json_expression | json}}，代碼如下：{{ {foo: "bar", baz: 23} | json }}//輸出結果為：{ "foo": "bar", "baz": 23 }data過濾器的使用 data過濾器是格式化輸出我們的data對象，該過濾器為：{{ date_expression | date : format}}
date_expression:是表達式date:使用data過濾器format：可選參數，日期輸出的格式化接下來我們使用一下這個過濾器
不使用format參數 //這是我們的控制器 var app=angular.module("myApp",[]); app.controller("firstController", function ($scope) { $scope.time=new Date(); }); //這是我們的表達式 {{ time | date }}//輸出結果為：Feb 7, 2017使用format參數 //這是我們的控制器 var app=angular.module("myApp",[]); app.controller("firstController", function ($scope) { $scope.time=new Date(); }); //這是我們的表達式 {{ time | date :"'yyyy-MM-dd"}}//輸出結果為：2017-02-07number過濾器的使用關于number過濾器的使用，是格式化數字輸出，這個過濾器為：{{ number_expression | number : fractionSize}}
number_expression：表達式number：使用number過濾器fractionSize：可選參數，可以控制數字的小數點位數,，如果不填，默認為3現在我們看一下這個過濾器的使用。
沒有使用fractionSize參數{{ 1.234567 | number }}//輸出結果為：1.234使用fractionSize參數{{ 1.234567 | number:6 }}//輸出結果為：1.234567 limitTo過濾器的使用limitTo過濾器是用來截取字符串和對對象，他的使用方式為：{{ limitTo_expression | limitTo : limit}}
limitTo_expression：字符串表達式或者對象limitTo:使用limitTo過濾器limit：代表字符串截取的長度，如果是正數是從前面截取，如果是負數是從后面截取接下來我們看一下這個過濾器的使用
字符串的截取{{ 'abcde' | limitTo:2 }}//運行結果：ab{{ 'abcde' | limitTo:-2 }}//運行結果：de對象的截取 //創建我們的控制器 var app=angular.module("myApp",[]); app.controller("firstController", function ($scope) { $scope.persons= [ {"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] }); //表達式 {{persons| limitTo:1}} //運行結果 [{"age":20,"id":10,"name":"iphone"}]orderBy過濾器的使用關于orderBy過濾器的使用：字符串按字母順序排序，數字按大小排序，這個表達式為：{{ orderBy_expression | orderBy : expression : reverse}}
orderBy_expression：排序的字符串orderBy：使用orderBy過濾器expression:一個決定順序的聲明reverse：是一個boollen類型，是正序排列還是逆序排列,如果不填默認為false接下來我們用幾個例子來看一下這個過濾器的使用：
根據id正序排列 //定義我們的控制器 var app=angular.module("myApp",[]); app.controller("firstController", function ($scope) { $scope.persons= [ {"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] }); //我們的表達式，根據id字段正序排序 {{persons| orderBy:'id':false}} //上面表達式等價于 {{persons| orderBy:'id'}} //運行結果 [{"age":20,"id":10,"name":"iphone"},{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]根據id逆序排列 //定義我們的控制器 var app=angular.module("myApp",[]); app.controller("firstController", function ($scope) { $scope.persons= [ {"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] }); //我們的表達式，根據id字段正序排序 {{persons| orderBy:'id':true}} //運行結果 [{"age":44,"id":12,"name":"test abc"},{"age":12,"id":11,"name":"sunm xing"},{"age":20,"id":10,"name":"iphone"}]filter過濾器的使用filter過濾器主要用于查找，也就是在array中選擇一定的條目，然后返回一個新數組，該過濾器的形式為：{{ filter_expression | filter : expression : comparator}}
filter_expression:代表數組源filter：使用filter過濾器expression：篩選的條件comparator：是一個比較器，比如篩選的時候是否區分大小寫，這個可以是一個函數對象，用于比較。現在我們來看一下這個過濾器的使用
代碼實現 //定義我們的控制器 var app=angular.module("myApp",[]); app.controller("firstController", function ($scope) { $scope.persons= [ {"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] }); //表達式（查找帶有字符串s的行） {{persons|filter:'s'}} //運行結果 [{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}] //表達式（注意：{'name':'iphone'}后面有一個空格）查找name字段為iphone的對象 {{ persons | filter:{'name':'iphone'} }} //運行結果 [{"age":20,"id":10,"name":"iphone"}]關于過濾器在指令中的使用在這里舉一個例子ng-repeat指令中的使用，代碼如下：
在前面我們使用了過濾器，分別是在表達式中使用，還有就是在指令中使用，其實過濾器的使用還可以在js代碼中使用，AngularJS為我們提供了一個$filter服務，此服務可以注入到我們js代碼中使用，接下來我們就來簡單的看一下這9種過濾器在js代碼中如何使用呢？
lowercase過濾器json過濾器uppercase過濾器limitTo過濾器date過濾器currency過濾器number過濾器orderBy過濾器filter過濾器過濾器在Javascript中的使用一般形式是這樣的：$filter()()
$filter服務有兩個參數，第一個參數是過濾器的名稱，第二個參數是一個參數列表。我們來看該服務的第二個參數，第二個參數的第一個是輸入的值，后面的參數分別為過濾器所需要的內容。以orderBy過濾器為例，看一下這個服務$filter('orderBy')(array, expression, reverse),我們看第二個參數array是輸入的排序數組，expression是過濾表達式，reverse代表是否逆序排列。新聞熱點
疑難解答
