详解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中使用过滤器。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# Angular  # 过滤器  # 详解AngularJS中自定义过滤器  # 详解AngularJS中$filter过滤器使用(自定义过滤器)  # AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例  # AngularJS 自定义过滤器详解及实例代码  # AngularJS自定义过滤器用法经典实例总结  # Angularjs 依赖压缩及自定义过滤器写法  # angularJs自定义过滤器实现手机号信息隐藏的方法  # AngularJS实现的自定义过滤器简单示例  # 简述angular自定义过滤器在页面和控制器中的使用  # Angular.Js中过滤器filter与自定义过滤器filter实例详解  # angularjs自定义过滤器demo示例  # 自定义  # 是在  # 转换成  # 都是  # 则是  # 可以用  # 给我们  # 才可以  # 这块  # 看在  # 很方便  # 则为  # 如何使用  # 中以  # 大到  # 中为  # 过程中  # 默认为  # 不传  # 首字母 

相关文章： 免费制作小说封面的网站有哪些,怎么接网站批量的封面单？  公司网站设计制作厂家,怎么创建自己的一个网站？  如何选择高效响应式自助建站源码系统？  企业微网站怎么做,公司网站和公众号有什么区别？  建站主机服务器选购指南：轻量应用与VPS配置解析  C#怎么使用委托和事件 C# delegate与event编程方法  如何确保西部建站助手FTP传输的安全性？  天河区网站制作公司,广州天河区如何办理身份证？需要什么资料有预约的网站吗？  陕西网站制作公司有哪些,陕西凌云电器有限公司官网？  如何在云主机上快速搭建多站点网站？  如何零成本快速生成个人自助网站？  北京建设网站制作公司,北京古代建筑博物馆预约官网？  javascript中的try catch异常捕获机制用法分析  如何用西部建站助手快速创建专业网站？  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？  如何在橙子建站中快速调整背景颜色？  制作网站的网址是什么,请问后缀为.com和.com.cn还有.cn的这三种网站是分别是什么类型的网站？  定制建站哪家更专业可靠？推荐榜单揭晓  MySQL查询结果复制到新表的方法(更新、插入)  如何高效生成建站之星成品网站源码？  高性能网站服务器配置指南：安全稳定与高效建站核心方案  上海制作企业网站有哪些,上海有哪些网站可以让企业免费发布招聘信息？  如何在云服务器上快速搭建个人网站？  网站制作的步骤包括,正确网址格式怎么写？  实现点击下箭头变上箭头来回切换的两种方法【推荐】  小自动建站系统：AI智能生成+拖拽模板，多端适配一键搭建  企业网站制作公司网页,推荐几家专业的天津网站制作公司？  网站图片在线制作软件,怎么在图片上做链接？  网站app免费制作软件,能免费看各大网站视频的手机app？  成都网站制作公司哪家好,四川省职工服务网是做什么用？  简历在线制作网站免费版,如何创建个人简历？  如何在香港服务器上快速搭建免备案网站？  外贸公司网站制作哪家好,maersk船公司官网？  网站规划与制作是什么,电子商务网站系统规划的内容及步骤是什么？  如何设计高效校园网站？  广东企业建站网站优化与SEO营销核心策略指南  内部网站制作流程,如何建立公司内部网站？  建站主机选购指南与交易推荐：核心配置解析  做企业网站制作流程,企业网站制作基本流程有哪些？  建站IDE高效指南：快速搭建+SEO优化+自适应模板全解析  如何通过商城自助建站源码实现零基础高效建站？  建站之星免费模板：自助建站系统与智能响应式一键生成  建站之星如何开启自定义404页面避免用户流失？  制作证书网站有哪些,全国城建培训中心证书查询官网？  微信小程序制作网站有哪些,微信小程序需要做网站吗？  如何在Windows环境下新建FTP站点并设置权限？  宝塔建站教程：一键部署配置流程与SEO优化实战指南  如何设置并定期更换建站之星安全管理员密码？  如何在Golang中引入测试模块_Golang测试包导入与使用实践  如何快速选择适合个人网站的云服务器配置？