详解Angular的内置过滤器和自定义过滤器【推荐】
更新时间：2016年12月26日 15:16:40 作者：小谢53
在实际的开发过程中，很多后端返回给我们的数据都是需要格式化处理的，在angular中为我们内置提供了filter指令，可以很方便的对数据进行处理。本文将对Angular的内置过滤器和自定义过滤器进行详细介绍，下面跟着小编一起来看下吧
在实际的开发过程中，很多後端返回给我们的数据都是需要格式化处理的，在angular中为我们内置提供了filter指令，可以很方便的对数据进行处理。首先我们看看在视图中是如何使用过滤器的。
1、currency(货币)格式化
<div ng-controller="Aaa">
<p>{{name | currency:'￥'}}</p>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name = '12334.273489274834';
}]);
</script>
在name的数据後面使用｜符号表示启用过滤器，如果对linux比较熟悉的话，这块的｜根linux的管道功能。currency可以理解成函数，而'￥'则是函数的参数，如果不传默认为$符号！
2、number(数字)格式化
<div ng-controller="Aaa">
<p>{{name | number:2}}</p>
</div>
<script type="text/javascript">
$scope.name = '12334.273489274834';
</script>
用来精确浮点数(精确到2位)默认是3位。
3、uppercase , lowercase(大小写)格式化
<div ng-controller="Aaa">
<p>{{name | uppercase}}</p>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name = 'hello';
}]);
</script>
uppercase转换成大写，lowercase转换成小写
4、json(数据)格式化
<div ng-controller="Aaa">
<pre>{{name | json}}</pre>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name = { name : 'xcg',age : 19 };
}]);
</script>
以json的格式输出到页面中，视图只能使用pre标签才可以识别
5、limitTo(截取)格式化
<div ng-controller="Aaa">
<p>{{name | limitTo : 3}}</p>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name = '123456789';
}]);
</script>
截取字符串，数字不行。。。
6、limitTo(截取)格式化
<div ng-controller="Aaa">
<p>{{name | date : 'yyyy-MM-dd hh:mm:ss'}}</p>
<p>{{name | date : 'MM/dd/yyyy @ h:mma'}}</p>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name = 1448022616463;
}]);
</script>
7、orderBy(排序)格式化
<div ng-controller="Aaa">
<pre>{{name | orderBy : 'age' : true | json}}</pre>
<div>
<script type="text/javascript">
var m1 = 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(筛选&过滤)格式化
<div ng-controller="Aaa">
<pre>{{name | filter : 'l' | json}}</pre>
</div>
<script type="text/javascript">
var m1 = 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中使用过滤器。
<div ng-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>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
var colors = [{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-dd hh:mm:ss');
$scope.orderBy = $filter('orderBy')(colors,'age',true);
$scope.filter = $filter('filter')(colors,'l');
}]);
</script>
这些都属于内置过滤器，我们还可以用.filter自定义过滤器。
<div ng-controller="Aaa">
<p>{{name | firstUpper : 2}}</p>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
//自定义过滤器
m1.filter('firstUpper',function(){
return function(str,num){
console.log(num); //2，得到传递的参数
return str.charAt(0).toUpperCase() + str.substring(1);
}
});
m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
$scope.name = 'hollo';
}]);
</script>
这里我们自定义了一个首字母大写的方法，例子是在视图中使用的，也可以在JS中使用过滤器。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
您可能感兴趣的文章:
相关文章
AngularJS 是一组用于创建单页Web应用的丰富框架，给构建丰富交互地应用带来了所有功能，其中一项主要的特性是Angular对动画的支持。下面通过本文给大家介绍AngularJS中实现显示或隐藏动画效果的方式总结，对angularjs动画效果相关知识感兴趣的朋友一起学习2015-12-12
本文主要介绍AngularJS ng-copy 指令,这里帮大家整理了ng-copy指令的基础资料,并附有示例代码和效果图,有需要的朋友参考下2016-08-08
这篇文章主要介绍了详解angular应用容器化部署，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了angular2中Http请求原理与用法,结合实例形式分析了AngularJS中http相关模块实现http服务请求与相应的相关操作技巧,需要的朋友可以参考下2018-01-01
这篇文章主要介绍了Angular-Touch库用法,结合触屏滑动事件的实现为例分析了Angular-Touch库的相关使用技巧,需要的朋友可以参考下2016-12-12
AngularJS使用angular-formly进行表单验证
这篇文章主要介绍了AngularJS使用angular-formly进行表单验证的相关资料,需要的朋友可以参考下2015-12-12
AngularJS实践之使用ng-repeat中$index的注意点
最近通过客户的投诉主要到在ng-repeat中使用了$index引发的一个bug，下面一起来看看这个错误是如何引发的, 以及如何避免这种bug产生,然后说说我们从中得到的经验和教训。有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-12-12
angular.js指令中的controller、compile与link函数的不同之处
最近一位大神问了我angular.js指令中的controller、compile与link函数的不同，想了想居然回答不出来，所以必须要深入的探究下，下面这篇文章主要介绍了关于angular.js指令中的controller、compile与link函数的不同之处，需要的朋友可以参考下。2017-05-05
这篇文章主要介绍了AngularJS中的DOM操作,较为详细的分析了AngularJS针对DOM操作的原理、实现技巧与相关注意事项,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了AngularJS优雅的自定义指令，告诉大家为什么使用AngularJS自定义指令，以及如何使用AngularJS自定义指令？感兴趣的小伙伴们可以参考一下2016-07-07
最新评论