详解Angular的内置过滤器和自定义过滤器【推荐】
在实际的开发过程中，很多後端返回给我们的数据都是需要格式化处理的，在angular中为我们内置提供了filter指令，可以很方便的对数据进行处理。首先我们看看在视图中是如何使用过滤器的。
1、currency(货币)格式化
<divng-controller="Aaa">
<p>{{name|currency:'￥'}}</p>
</div>
<scripttype="text/javascript">
varm1=angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name='12334.273489274834';
}]);
</script>
在name的数据後面使用｜符号表示启用过滤器，如果对linux比较熟悉的话，这块的｜根linux的管道功能。currency可以理解成函数，而'￥'则是函数的参数，如果不传默认为$符号！
2、number(数字)格式化
<divng-controller="Aaa">
<p>{{name|number:2}}</p>
</div>
<scripttype="text/javascript">
$scope.name='12334.273489274834';
</script>
用来精确浮点数(精确到2位)默认是3位。
3、uppercase,lowercase(大小写)格式化
<divng-controller="Aaa">
<p>{{name|uppercase}}</p>
</div>
<scripttype="text/javascript">
varm1=angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name='hello';
}]);
</script>
uppercase转换成大写，lowercase转换成小写
4、json(数据)格式化
<divng-controller="Aaa">
<pre>{{name|json}}</pre>
</div>
<scripttype="text/javascript">
varm1=angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name={name:'xcg',age:19};
}]);
</script>
以json的格式输出到页面中，视图只能使用pre标签才可以识别
5、limitTo(截取)格式化
<divng-controller="Aaa">
<p>{{name|limitTo:3}}</p>
</div>
<scripttype="text/javascript">
varm1=angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name='123456789';
}]);
</script>
截取字符串，数字不行。。。
6、limitTo(截取)格式化
<divng-controller="Aaa">
<p>{{name|date:'yyyy-MM-ddhh:mm:ss'}}</p>
<p>{{name|date:'MM/dd/yyyy@h:mma'}}</p>
</div>
<scripttype="text/javascript">
varm1=angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name=1448022616463;
}]);
</script>
7、orderBy(排序)格式化
<divng-controller="Aaa">
<pre>{{name|orderBy:'age':true|json}}</pre>
<div>
<scripttype="text/javascript">
varm1=angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name=[
{color:'red',age:'10'},
{color:'yellow',age:'20'},
{color:'blue',age:'30'},
{color:'green',age:'40'}
];
}]);
</script>
如果排序的值是字母，就按照字母的顺序来排序。如果是数字，从大到小。传入true则为逆向排序。
8、filter(筛选&过滤)格式化
<divng-controller="Aaa">
<pre>{{name|filter:'l'|json}}</pre>
</div>
<scripttype="text/javascript">
varm1=angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name=[
{color:'red',age:'10'},
{color:'yellow',age:'20'},
{color:'blue',age:'30'},
{color:'green',age:'40'}
];
}]);
</script>
在filter传入'l'，会筛选出blue以及yellow。
<pre>{{name|filter:'yellow':true|json}}</pre>如果像这样再传入true，就必须保证value的完整性，单单的'l'是无法筛选出来的。
上面都是在视图中以表达式的形式使用过滤器，下面我们来看看在JS中使用过滤器。
<divng-controller="Aaa">
<p>{{currency}}</p>
<p>{{number}}</p>
<p>{{uppercase}}</p>
<pre>{{json}}</pre>
<p>{{limitTo}}</p>
<p>{{date}}</p>
<pre>{{orderBy}}</pre>
<pre>{{filter}}</pre>
</div>
<scripttype="text/javascript">
varm1=angular.module('myApp',[]);
m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
varcolors=[{color:'red',age:'10'},
{color:'yellow',age:'20'},
{color:'blue',age:'30'},
{color:'green',age:'40'}];
$scope.currency=$filter('currency')(12334.273489274834,'￥');
$scope.number=$filter('number')('12334.273489274834',2);
$scope.uppercase=$filter('uppercase')('hello');
$scope.json=$filter('json')({name:'xcg',age:19});
$scope.limitTo=$filter('limitTo')('xiecg',2);
$scope.date=$filter('date')('1448106268837','yyyy-MM-ddhh:mm:ss');
$scope.orderBy=$filter('orderBy')(colors,'age',true);
$scope.filter=$filter('filter')(colors,'l');
}]);
</script>
这些都属于内置过滤器，我们还可以用.filter自定义过滤器。
<divng-controller="Aaa">
<p>{{name|firstUpper:2}}</p>
</div>
<scripttype="text/javascript">
varm1=angular.module('myApp',[]);
//自定义过滤器
m1.filter('firstUpper',function(){
returnfunction(str,num){
console.log(num);//2，得到传递的参数
returnstr.charAt(0).toUpperCase()+str.substring(1);
}
});
m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
$scope.name='hollo';
}]);
</script>
这里我们自定义了一个首字母大写的方法，例子是在视图中使用的，也可以在JS中使用过滤器。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！