? ? ? ? ? 在Angular中纺裁，過濾器的功能主要是格式化數(shù)據(jù)表達式祟身，且可以自定義過濾器坡脐。作用域(scope)主要服務于頁面模板泄私，在控制器和頁面中起橋梁作用，保存模板中的數(shù)據(jù)對象备闲，為模板中的元素提供方法和屬性晌端。
過濾器的表現(xiàn)形式
在angular中有三種變現(xiàn)形式，通過管道字符 “ ?| ?”恬砂，與需要處理的代碼進行連接咧纠，看代碼：
一，單個過濾器泻骤，如：{{表達式 | 過濾器名}}
? ?貨幣過濾器 ? ? {{8.88 | currency}}? // $8.88
二漆羔，多個過濾器，如：{{表達式 | 過濾器名1 | 過濾器名2 | ...}}
? ?{{8.88 | currency | filter | ...}}
三狱掂，帶參數(shù)過濾器,如：{{表達式 | 過濾器名1 : 參數(shù)1 : 參數(shù)2 : ...}}
? ?{{8.88 | number : 1}}
angular中自帶的九種過濾器
一演痒，currency格式化數(shù)字為貨幣格式。
? ? ? ?{{ ?8.88 | currency ?}}// ?默認為$8.88
? ? ? ?{{ ?8.88 | currency ?： "￥"}} // ￥8.88
二趋惨，lowercase過濾器將字符串格式化為小寫
? ? ? 姓名為{{ lastName | lowercase }} // zhang? ? $scope.lastName="ZHANG"
三鸟顺，uppercase過濾器將字符串格式化為大寫
{{ lastName | uppercase }} // ZHANG? ? $scope.lastName="zhang"
四，orderBy過濾器根據(jù)表達式排列數(shù)組
// 根據(jù)id降序排序
{{[{"age":20,"id":10,"name":"iphone"},
{"age":12,"id":11,"name":"sunm xing"},
{"age":44,"id":12,"name":"test abc"}]
| ? orderBy:'id':true}}
// 根據(jù)id升序排序
{{[{"age":20,"id":10,"name":"iphone"},
{"age":12,"id":11,"name":"sunm xing"},
{"age":44,"id":12,"name":"test abc"}]
| ? orderBy:'id'}}
五器虾，filter查找
// 查找name為iphone的行
{{[{"age":20,"id":10,"name":"iphone"},
{"age":12,"id":11,"name":"sunm xing"},
{"age":44,"id":12,"name":"test abc"}]
|filter:{'name':'iphone'}}}//輸出的話就是{"age":20,"id":10,"name":"iphone"}
六讯嫂，limitTo 截取
{{"1234567890"|limitTo:6}}// 從前面開始截取6位
{{"1234567890"|limitTo:-4}}// 從后面開始截取4位
七蹦锋，date 時間格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss" }}// 2017-03-22 13:52:25
八，number 格式化（保留小數(shù)）
{{149016.1945000|number:2}} ? //149016.19
九欧芽， json ? (格式化json對象)
json過濾器可以把一個js對象格式化為json字符串莉掂，沒有參數(shù)。這東西有什么用呢渐裸，我一般也不會在頁面上輸出一個json串啊巫湘，官網(wǎng)說它 可以用來進行調(diào)試装悲，嗯昏鹃，是個不錯的選擇【髡铮或者洞渤，也可以用在js中使用，作用就和我們熟悉的JSON.stringify()一樣属瓣。用法超級簡單：
{{ jsonTest | json}}
angular自定義過濾器
方法：
app.filter('name', function() {
? ? ? ? return function(input, char) {
? ? ? ? ? ? ?return ?自定義你的過濾器
? ? ? }
}
app.filter('capitalize', function() {
? ? ? ? ? ? ?//input 需要過濾的元素
? ? ? ? ? ? ?//char位置载迄，索引減一
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?return function(input, char) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?if(isNaN(input)) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //如果序號位置沒有設置，索引位置默認是0
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var char = char - 1 || 0;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //把過濾元素索引位置上的字母轉(zhuǎn)換成大寫
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var letter = input.charAt(char).toUpperCase();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var out = [];
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? for(var i = 0; i < input.length; i++) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?if(i == char) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?out.push(letter);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? out.push(input[i]);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return out.join('');
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?} else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return input;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? }
});
