详解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>