6 Angular的內建過濾器和自定義過濾器

2022-05-05 09:15:09 字數 2546 閱讀 1790

在實際的開發過程中,很多後端返回給我們的資料都是需要格式化處理的,在angular中為我們內建提供了filter指令,可以很方便的對資料進行處理。首先我們看看在檢視中是如何使用過濾器的。

1、currency(貨幣)格式化

}

m1.controller('aaa',['$scope',function

($scope)]);

在name的資料後面使用|符號表示啟用過濾器,如果對linux比較熟悉的話,這塊的|根linux的管道功能。currency可以理解成函式,而'¥'則是函式的引數,如果不傳預設為$符號!

2、number(數字)格式化

}

用來精確浮點數(精確到2位)預設是3位。

3、uppercase , lowercase(大小寫)格式化

}

m1.controller('aaa',['$scope',function

($scope)]);

uppercase轉換成大寫,lowercase轉換成小寫

4、json(資料)格式化

}
m1.controller('aaa',['$scope',function

($scope);

}]);

以json的格式輸出到頁面中,檢視只能使用pre標籤才可以識別

5、limitto(擷取)格式化

}

m1.controller('aaa',['$scope',function

($scope)]);

擷取字串,數字不行。。。

6、limitto(擷取)格式化

}

} m1.controller('aaa',['$scope',function

($scope)]);

7、orderby(排序)格式化

}
m1.controller('aaa',['$scope',function

($scope),,,

];}]);

如果排序的值是字母,就按照字母的順序來排序。如果是數字,從大到小。傳入true則為逆向排序。

8、filter(篩選&過濾)格式化

}
m1.controller('aaa',['$scope',function

($scope),,,

];}]);

在filter傳入'l',會篩選出blue以及yellow。

}
如果像這樣再傳入true,就必須保證value的完整性,單單的'l'是無法篩選出來的。

上面都是在檢視中以表示式的形式使用過濾器,下面我們來看看在js中使用過濾器。

}}}

}

}

}

}
}
m1.controller('aaa',['$scope','$filter',function

($scope,$filter),,,

];$scope.currency = $filter('currency')(12334.273489274834,'¥');

$scope.number = $filter('number')('12334.273489274834',2);

$scope.uppercase = $filter('uppercase')('hello');

$scope.json = $filter('json')();

$scope.limitto = $filter('limitto')('xiecg',2);

$scope.date = $filter('date')('1448106268837','yyyy-mm-dd hh:mm:ss');

$scope.orderby = $filter('orderby')(colors,'age',true

); $scope.filter = $filter('filter')(colors,'l');

}]);

這些都屬於內建過濾器,我們還可以用.filter自定義過濾器。

}

//自定義過濾器

m1.filter('firstupper',function

()});

m1.controller('aaa',['$scope','$filter',function

($scope,$filter)]);

這裡我們自定義了乙個首字母大寫的方法,例子是在檢視中使用的,也可以在js中使用過濾器。

最後,微博求粉,謝謝。

angular6 內建管道 過濾器

angular管道的使用 angular中的管道 pipe 以及自定義管道 適用於angular4 angualr5 angualr6 angular7 angular中的管道 pipe 是用來對輸入的資料進行處理,如大小寫轉換 數值和日期格式化等。大小寫轉換 轉換成大寫 轉換成小寫 日期格式轉換 ...

過濾器(6) 過濾器的攔截

本系列部落格彙總在這裡 過濾器彙總 我們來做個測試,寫乙個過濾器,指定過濾的資源為 index.jsp,然後我們在瀏覽器中直接訪問 index.jsp,你會發現過濾器執行了!但是,當我們在 helloservlet 中使用伺服器端的跳轉request.getrequestdispathcer ind...

shiro內建過濾器

rest 例子 admins user rest user 根據請求的方法,相當於 admins user perms user method 其中method為post,get,delete等。port 例子 admins user port 8081 當請求的url的埠不是8081是跳轉到sch...