详解Angular的内置过滤器和自定义过滤器【推荐】  更新时间:2016年12月26日 15:16:40   作者:小谢53   在实际的开发过程中,很多后端返回给我们的数据都是需要格式化处理的,在angular中为我们内置提供了filter指令,可以很方便的对数据进行处理。本文将对Angular的内置过滤器和自定义过滤器进行详细介绍,下面跟着小编一起来看下吧 在实际的开发过程中,很多後端返回给我们的数据都是需要格式化处理的,在angular中为我们内置提供了filter指令,可以很方便的对数据进行处理。首先我们看看在视图中是如何使用过滤器的。 1、currency(货币)格式化 {{name | currency:’¥’}} 在name的数据後面使用|符号表示启用过滤器,如果对linux比较熟悉的话,这块的|根linux的管道功能。currency可以理解成函数,而’¥’则是函数的参数,如果不传默认为$符号! 2、number(数字)格式化 {{name | number:2}} 用来精确浮点数(精确到2位)默认是3位。 3、uppercase , lowercase(大小写)格式化 {{name | uppercase}} uppercase转换成大写,lowercase转换成小写 4、json(数据)格式化 {{name | json}} 以json的格式输出到页面中,视图只能使用pre标签才可以识别 5、limitTo(截取)格式化 {{name | limitTo : 3}} 截取字符串,数字不行。。。 6、limitTo(截取)格式化 {{name | date : ‘yyyy-MM-dd hh:mm:ss’}}   {{name | date : ‘MM/dd/yyyy @ h:mma’}} 7、orderBy(排序)格式化 {{name | orderBy : ‘age’ : true | json}} 如果排序的值是字母,就按照字母的顺序来排序。如果是数字,从大到小。传入true则为逆向排序。 8、filter(筛选&过滤)格式化 {{name | filter : ‘l’ | json}} 在filter传入’l’,会筛选出blue以及yellow。 {{name | filter : ‘yellow’ : true | json}} 如果像这样再传入true,就必须保证value的完整性,单单的’l’是无法筛选出来的。 上面都是在视图中以表达式的形式使用过滤器,下面我们来看看在JS中使用过滤器。 {{currency}} {{number}} {{uppercase}} {{json}} {{limitTo}} {{date}} {{orderBy}} {{filter}} 这些都属于内置过滤器,我们还可以用.filter自定义过滤器。 {{name | firstUpper : 2}} 这里我们自定义了一个首字母大写的方法,例子是在视图中使用的,也可以在JS中使用过滤器。 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家! 您可能感兴趣的文章: 详解AngularJS中自定义过滤器 详解AngularJS中$filter过滤器使用(自定义过滤器) AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例 AngularJS 自定义过滤器详解及实例代码 AngularJS自定义过滤器用法经典实例总结 Angularjs 依赖压缩及自定义过滤器写法 angularJs自定义过滤器实现手机号信息隐藏的方法 AngularJS实现的自定义过滤器简单示例 简述angular自定义过滤器在页面和控制器中的使用 Angular.Js中过滤器filter与自定义过滤器filter实例详解 angularjs自定义过滤器demo示例 Angular 过滤器 相关文章 Angular(5.2->6.1)升级小结 今天小编就为大家分享一篇关于Angular(5.2->6.1)升级小结,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧 2018-12-12 Angularjs基础知识及示例汇总 本文给大家总结了一些angularjs的基础知识及相关示例,分享给大家,希望能对大家有所帮助。 2015-01-01 使用AngularJS创建自定义的过滤器的方法 这篇文章主要介绍了使用AngularJS创建自定义的过滤器的方法,AngularJS是非常热门的JavaScript库,需要的朋友可以参考下 2015-06-06 AngularJS路由实现页面跳转实例 这篇文章主要为大家详细介绍了AngularJS路由实现页面跳转的实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-03-03 angular.extend方法的具体使用 本篇文章主要介绍了angular.extend方法的具体使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-09-09 Angularjs实现多图片上传预览功能 这篇文章主要介绍了Angularjs实现多图片上传预览功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2018-07-07 浅谈AngularJS中$http服务的简单用法 这篇文章主要介绍了浅谈AngularJS中$http服务的简单用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-05-05 深入探究AngularJS框架中Scope对象的超级教程 这篇文章主要介绍了AngularJS框架中Scope对象使用的相关学习教程,包括其和rootscope的区别介绍,需要的朋友可以参考下 2016-01-01 Angular Module声明和获取重载实例代码 这篇文章主要介绍了Angular Module声明和获取重载实例代码的相关资料,需要的朋友可以参考下 2016-09-09 详解AngularJS过滤器的使用 这篇文章主要为大家详细介绍了AngularJS过滤器的使用方法,感兴趣的小伙伴们可以参考一下 2016-03-03 最新评论

在实际的开发过程中,很多後端返回给我们的数据都是需要格式化处理的,在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中自定义过滤器
  • 详解AngularJS中$filter过滤器使用(自定义过滤器)
  • AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
  • AngularJS 自定义过滤器详解及实例代码
  • AngularJS自定义过滤器用法经典实例总结
  • Angularjs 依赖压缩及自定义过滤器写法
  • angularJs自定义过滤器实现手机号信息隐藏的方法
  • AngularJS实现的自定义过滤器简单示例
  • 简述angular自定义过滤器在页面和控制器中的使用
  • Angular.Js中过滤器filter与自定义过滤器filter实例详解
  • angularjs自定义过滤器demo示例
张贴在3