在开发中，经常会遇到这样的场景
如用户的性别分为&男&和&女&，在数据库中保存的值为1和0，用户在查看自己的性别时后端返回的值自然是1或0，前端要转换为&男&或&女&再显示出来；
如我要换个羽毛球拍，某猫上羽毛球拍的品牌多达数十种，我想单独查看YONEX这个品牌的羽毛球拍；
买完羽毛球拍我还想买一桶羽毛球，点击按销量排序展示商品；
以上三种场景分别对数据进行了转换／筛选／排序，总而言之就是对数据的格式化，AngularJS的filter就是用来做这个事的。
内置过滤器
AngularJS内置了很多过滤器，在HTML模板的绑定符号{{}}内通过｜来调用过滤器
如字母转换成大写：$scope.name='wangmeijian'
{{name | uppercase}} & // 输出 WANGMEIJIAN
数字转成千分位写法：$scope.num =&
{{num | number}} // 输出 12,345,678
日期格式化：$scope.date=new Date()
{{date | date:'yy-MM-dd'}} & // 输出
数字格式化成货币：$scope.num=
{{num | currency:'&'}} & // 输出&&987,654,321.00
稍微复杂一点的过滤器&&&filter&，可以返回给定数组的子集，它接收一个参数，这个参数可以是字符串、对象、函数
字符串：返回所有包含这个字符串的元素，想要返回不包含这个字符串的元素则在前面加！
{{['wang','mei','jian'] | filter:'a'}} // 返回包含字母a的元素&['wang','jian']
对象：Angular会将待过滤对象的属性与这个对象中的同名属性进行比较，如果属性值是字符串会判断是否包含该字符串（注意这里是包含，并不需要完全相等）
name: 'wangmeijian',
sex: 'boy'
name: 'bokeyuan',
sex: 'sex'
] | filter:{
　　　　}}}
// 输出&[{"name":"wangmeijian","sex":"boy"}]
函数：对每个元素都执行该函数，返回非假值的元素会出现在新的数组中并返回
$scope.getNumber = function(n){
　　return !isNaN(n);
{{ ['demo',2,3] | filter:getNumber}} &// 输出 [2,3]
自定义过滤器
当内置函数不能满足你的业务需求时，就需要自定义一个过滤器，自定义过滤器返回一个函数，函数的参数就是HTML模板中|左侧的数据，它会自动传入过滤器中
比如需求是将一句话中的每个单词首字母变成大写
&html ng-app='app'&
&title&AngularJS过滤器filter入门&/title&
&script type="text/javascript" src="/angular.js/1.5.0-beta.1/angular.js"&&/script&
&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. i++) {
arr[i] = arr[i].substr(0,1).toUpperCase() + arr[i].slice(1);
return arr.join(" ")
&需要注意的是，内置过滤器&filter&的参数是函数时，会对数组的每个元素执行该函数，自定义过滤器是对数组对象执行它return的函数。
本文版权归作者和博客园所有，欢迎转载，转载请标明出处。
如果您觉得本篇博文对您有所收获，请点击右下角的 [推荐]，谢谢！
阅读(...) 评论()使用自定义货币过滤器：&
//js中的代码，这是个判断货币正负的代码var&myApp&=&angular.module('myApp',&[]);myApp.filter('customCurrency',&["$filter",&function&($filter)&{&&&&return&function(amount,&currencySymbol){&&&&&&&&var&currency&=&$filter('currency');&&&&&&&&&if(amount&&&0){&&&&&&&&&&&&return&currency(amount,&currencySymbol).replace("(",&"-").replace(")",&"");&&&&&&&&}&&&&&&&&&return&currency(amount,&currencySymbol);&&&&};}]);
阅读(...) 评论()}