0

0

实例解析angularjs的filter过滤器

高洛峰

高洛峰

发布时间:2017-02-07 13:59:07

|

932人浏览过

|

来源于php中文网

原创

现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下!

ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤类常用的filter后面上例子。

lowercase(小写)

{{ lastName | lowercase }}

uppercase(大写)

{{ lastName | uppercase }}

number(格式化数字)

number过滤器可以为一个数字加上千位分割,像这样,123,456,789。同时接收一个参数,可以指定小float型保留几位小数:

{{ num | number : 2 }}

currency (货币处理)

{{num | currency : '¥'}}

json(格式化json对象)

{{ jsonTest | json}}

作用就和我们熟悉的JSON.stringify()一样

 limitTo(限制数组长度或字符串长度)

{{ childrenArray | limitTo : 3 }}  //将会显示数组中的前3项

filter(匹配子串)

用来处理一个数组,然后可以过滤出含有某个子串的元素,作为一个子数组来返回。可以是字符串数组,也可以是对象数组。如果是对象数组,可以匹配属性的值。它接收一个参数,用来定义子串的匹配规则。

html

<ul>
 <li>filter 匹配子串(以下写法只是方便观察)</li>
 <li>{{ webArr | filter : 'n' }} <!--匹配属性值中含有n的--></li>
 <li>{{ webArr | filter : 25 }} <!--匹配属性值中含有25的--></li>
 <li>{{ webArr | filter : {name : 'l'} }} <!--//参数是对象,匹配name属性中含有l的--></li>
 <li>{{ webArr | filter : fun }} <!--/参数是函数,指定返回age>25的--></li>
</ul>

   

js

$scope.webArr = [
   {name:'nick',age:25},
   {name:'ljy',age:28},
   {name:'xzl',age:28},
   {name:'zyh',age:30}
  ];
$scope.fun = function(e){return e.age>25;};

效果展示:

filter 匹配子串(以下写法只是方便观察)

[{"name":"nick","age":25}]
[{"name":"nick","age":25}]
[{"name":"ljy","age":28},{"name":"xzl","age":28}]
[{"name":"ljy","age":28},{"name":"xzl","age":28},{"name":"zyh","age":30}]

日期类

日期过滤器应该是常用过滤器中最简单的吧!

yyyy--表示年份;

MM--月份(必须大写);

dd--日期;

hh--时;

mm--分(必须小写);

ss--秒;

EEEE--星期;

hh:mm--形式是24小时制;

h:mma--12小时制;

其中年、月、日、时、分、秒 或  / : - 等自己试做搭配吧!

<ul>
 <li>8 日期1</li>
 <li ng-bind="date|date:'yyyy/MM/dd hh:mm:ss EEEE'"></li>
 <li>8 日期2</li>
 <li ng-bind="date|date:'yyyy年MM月dd日 h:mma EEEE'"></li>
 <li>8 日期3</li>
 <li ng-bind="date|date:'yyyy年MM月dd日 hh时mm分ss秒'"></li>
 <li>8 日期4</li>
 <li ng-bind="date|date:'yyyy/MM/dd hh:mm:ss'"></li>
 </ul>

   

日期1的显示效果:

2016/11/19 11:59:05 Saturday

日期2的显示效果:

2016年11月19日 12:01PM Saturday

日期3的显示效果:

2016年11月22日 10时42分09秒

日期4的显示效果:

2016/11/22 11:16:58

orderBy排序(个人认为第七例最佳写法)

压缩图
压缩图

在线无损图片压缩工具

下载

ng-repeat生成一个独立的scope作用域,直接在ng-repeat循环后加管道orderBy排序。

用法很简单,但有坑需注意两点:

参数引号勿忘;

参数形式--直接写成age,不用写成item2.age。

3 按年龄排序(默认升序)

<ul>
 <li>3 按年龄排序(默认升序)</li>
 <li ng-repeat="item2 in items2|orderBy:'age'">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

效果展示:

按年龄排序(默认升序)
name ljy
age 27
stature 165
name nick
age 25
stature 170
name xzl
age 27
stature 175
name zyh
age 29
stature 165

4 按年龄排序(加参数true则为倒序即降序)

<ul>
 <li ng-repeat="item2 in items2|orderBy:'age':true">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

 

效果展示:

按年龄排序(加参数true则为倒序即降序)
name zyh
age 29
stature 165
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name nick
age 25
stature 170

   

5 想先按年龄升序在按身高降序(全是降序了,达不到效果,见第7例)

我曾就天真的这样写过^*^

<ul>
 <!--<li ng-repeat="item2 in items2|orderBy:'age':'-stature'">-->
 <li ng-repeat="item2 in items2|orderBy:'age':'stature':true">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

效果展示:

想先按年龄升序在按身高降序(全是降序了,达不到效果,见第7例)
name zyh
age 29
stature 165
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name nick
age 25
stature 170

6 先按年龄在按身高排序(多个参数写出数组形式)

<ul>
 <li ng-repeat="item2 in items2|orderBy:['age','stature']">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

效果展示:

先按年龄在按身高排序(多个参数写出数组形式)
name nick
age 25
stature 170
name ljy
age 27
stature 165
name xzl
age 27
stature 175
name zyh
age 29
stature 165

7 先按年龄升序在按身高降序(多个参数写出数组形式)

 在参数前加负号即可实现倒序

<ul>
 <li ng-repeat="item2 in items2|orderBy:['age','-stature']">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

效果展示:

!!7 先按年龄升序在按身高降序(多个参数写出数组形式)
name nick
age 25
stature 170
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name zyh
age 29
stature 165

个人觉得ng内置的过滤器好多都比较鸡肋。个性化的需求自定义的过滤器吧。

自定义过滤器

自定义过滤器就是返回一个函数,函数又返回你要的值即可!

实例:

angular.module('youAppName',[])
  .filter('youFilterName',function(){
   return function(){
   //你的处理代码
   return result;//返回你要的值
   }
  })

自定义一个求和的过滤器

html

<ul>
<li>!!1 求和</li>
<li ng-repeat="item1 in items1">
 <div ng-bind="item1.male | sumNick:item1.female:item1.gay"></div>
</li>
</ul>

用法:

管道前后所有参数即为和

js

var nickAppModule=angular.module('nickApp',[]);
 nickAppModule
  //求和
  .filter('sumNick',function(){
   return function(){
   var arr=Array.prototype.slice.call(arguments),sum=0;
   for(var i= 0,len=arr.length;i<len;i++){
    sum+=arr[i]?arr[i]:0;
   }
   return sum;
   }
  })

arguments--函数接受的参数集合,类数组;

Array.prototype.slice.call(arguments)

这句将类数组转为数组;

 sum+=arr[i]?arr[i]:0;

总和sum等于数组的每个元素累加的和。避免后台为传值,而又将次参数传人自定义filer函数作为参数,容错时写成0保险。

自定义一个求百分百的过滤器(求保留小数点后两位百分比)

html

<ul ng-repeat="item1 in items1">
 <li>!!2 求百分比</li>
 <li>
  <b>male</b>
  <i ng-bind="item1.male|percentNick:item1.female:item1.gay"></i>
 </li>
 <li>
  <b>female</b>
  <u ng-bind="item1.female|percentNick:item1.male:item1.gay"></u>
 </li>
 <li>
  <b>gay</b>
  <s ng-bind="item1.gay|percentNick:item1.female:item1.male"></s>
 </li>
 </ul>

用法:

分子写在管道前面,管道后面的所有参数和加管道前的参数和则为分母

js

var nickAppModule=angular.module('nickApp',[]);
 nickAppModule
//百分比
  .filter('percentNick',function(){
   return function(){
   var arr=Array.prototype.slice.call(arguments),sum=0;
   for(var i= 0,len=arr.length;i<len;i++){
    sum+=arr[i]?arr[i]:0;
   }
   //0/0也是nan
   return sum==0?'0%':Math.round((arr[0]?arr[0]:0)/sum*10000)/100+"%";
   }
  })

这里就是在上面求和的filter上多了一句:

sum==0?'0%':Math.round((arr[0]?arr[0]:0)/sum*10000)/100+"%"

Math内置函数,Math.round四舍五入保留整数;

将总和乘以10000除以100拼接百分比号,即保留两位小数。

完整代码:

<!DOCTYPE html>
<html ng-app="nickApp">
<head>
 <meta charset="UTF-8">
 <title>ng filter nick</title>
</head>
<body ng-controller="nickCtrl">
 <ul>
 <li>!!1 求和</li>
 <li ng-repeat="item1 in items1">
  <div ng-bind="item1.male | sumNick:item1.female:item1.gay"></div>
 </li>
 </ul>
 <ul ng-repeat="item1 in items1">
 <li>!!2 求百分比</li>
 <li>
  <b>male</b>
  <i ng-bind="item1.male|percentNick:item1.female:item1.gay"></i>
 </li>
 <li>
  <b>female</b>
  <u ng-bind="item1.female|percentNick:item1.male:item1.gay"></u>
 </li>
 <li>
  <b>gay</b>
  <s ng-bind="item1.gay|percentNick:item1.female:item1.male"></s>
 </li>
 </ul>
 <ul>
 <li>3 按年龄排序(默认升序)</li>
 <li ng-repeat="item2 in items2|orderBy:'age'">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>
 <ul>
 <li>4 按年龄排序(加参数true则为倒序即降序)</li>
 <li ng-repeat="item2 in items2|orderBy:'age':true">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>
 <ul>
 <li>5 想先按年龄升序在按身高降序(全是降序了,达不到效果,见第7例)</li>
 <!--<li ng-repeat="item2 in items2|orderBy:'age':'-stature'">-->
 <li ng-repeat="item2 in items2|orderBy:'age':'stature':true">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>
 <ul>
 <li>6 先按年龄在按身高排序(多个参数写出数组形式)</li>
 <li ng-repeat="item2 in items2|orderBy:['age','stature']">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>
 <ul>
 <li>!!7 先按年龄升序在按身高降序(多个参数写出数组形式)</li>
 <li ng-repeat="item2 in items2|orderBy:['age','-stature']">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>
 <ul>
 <li>8 日期1</li>
 <li ng-bind="date|date:'yyyy/MM/dd hh:mm:ss EEEE'"></li>
 <li>2016/11/19 11:59:05 Saturday</li>
 <li>8 日期2</li>
 <li ng-bind="date|date:'yyyy年MM月dd日 h:mma EEEE'"></li>
 <li>2016年11月19日 12:01PM Saturday</li>
 <li>8 日期3</li>
 <li ng-bind="date|date:'yyyy年MM月dd日 hh时mm分ss秒'"></li>
 <li>2016年11月22日 10时42分09秒</li>
 <li>8 日期4</li>
 <li ng-bind="date|date:'yyyy/MM/dd hh:mm:ss'"></li>
 <li>2016/11/22 11:16:58</li>
 </ul>
 <div>{{100000|currency:'¥'}}<!--¥可以写成$或其他--></div>
 <ul>
 <li>filter 匹配子串(以下写法只是方便观察)</li>
 <li>{{ webArr | filter : 'n' }} <!--匹配属性值中含有n的--></li>
 <li>{{ webArr | filter : 25 }} <!--匹配属性值中含有25的--></li>
 <li>{{ webArr | filter : {name : 'l'} }} <!--//参数是对象,匹配name属性中含有l的--></li>
 <li>{{ webArr | filter : fun }} <!--/参数是函数,指定返回age>25的--></li>
 </ul>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
 <script>
 var nickAppModule=angular.module('nickApp',[]);
 nickAppModule
  //求和
  .filter('sumNick',function(){//管道前后所有参数和
   return function(){
   var arr=Array.prototype.slice.call(arguments),sum=0;
   for(var i= 0,len=arr.length;i<len;i++){
    sum+=arr[i]?arr[i]:0;
   }
   return sum;
   }
  })
  //百分比
  .filter('percentNick',function(){//小数点后两位百分比 分子写在管道前面,管道后面的所有参数和加管道前的参数和为分母
   return function(){
   var arr=Array.prototype.slice.call(arguments),sum=0;
   for(var i= 0,len=arr.length;i<len;i++){
    sum+=arr[i]?arr[i]:0;
   }
   //0/0也是nan
   return sum==0?'0%':Math.round((arr[0]?arr[0]:0)/sum*10000)/100+"%";
   }
  })
 </script>
<script>
 nickAppModule
  .controller('nickCtrl',['$scope',function($scope){
  $scope.items1=[{
   male:66,
   female:23,
   gay:5,
   other:'xxx',
   msg:'xxx'
  },
   {
   male:16,
   female:8,
   gay:7,
   other:'xxx',
   msg:'xxx'
   }];
  $scope.items2=[
   {
   name:'ljy',
   age:27,
   stature:165
   },
   {
   name:'nick',
   age:25,
   stature:170
   },
   {
   name:'xzl',
   age:27,
   stature:175
   },
   {
   name:'zyh',
   age:29,
   stature:165
   }];
  $scope.date=new Date();
  $scope.webArr = [
   {name:'nick',age:25},
   {name:'ljy',age:28},
   {name:'xzl',age:28},
   {name:'zyh',age:30}
  ];
  $scope.fun = function(e){return e.age>25;};
  }])
</script>
</body>
</html>

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

更多实例解析angularjs的filter过滤器相关文章请关注PHP中文网!

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

1142

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

371

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

245

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

37

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

114

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

77

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

17

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

863

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

123

2026.02.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
AngularJS教程
AngularJS教程

共24课时 | 3.8万人学习

走进 ES6 新标准语法
走进 ES6 新标准语法

共15课时 | 1.6万人学习

AngularJS 中文手册
AngularJS 中文手册

共0课时 | 0.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号