AngularJS过滤器filter用法总结


Posted in Javascript onDecember 13, 2016

本文实例总结了AngularJS过滤器filter用法。分享给大家供大家参考,具体如下:

引言

filter过滤器对于我们来说并不陌生,他和我们现实生活中的过滤器的意思差不多,它的作用就是接收一个输入的值,然后按照某个规则进行处理然后输出最后的结果,例如我们输入一个数字,然后我们需要得到货币形式的数据,这样我们就可以利用过滤器来实现,AngularJS中的过滤器是非常简单的,分为内置和自定义两种,下面小编就简单的给大家介绍一些。

内置过滤器

ng内置了一些过滤器,它们是:currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。除此之外还可以自定义过滤器,这个就强大了,可以满足任何要求的数据处理。下面来看一下他们的使用方法;

1. currency (货币处理)

使用currency可以将数字格式化为货币,默认是美元符号,你可以自己传入所需的符号,例如我传入人民币:

{{num | currency : '¥'}}

2. date (日期格式化)

原生的js对日期的格式化能力有限,ng提供的date过滤器基本可以满足一般的格式化要求。用法如下:

{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}

参数用来指定所要的格式,y M d h m s E 分别表示 年 月 日 时 分 秒 星期,你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。另外参数也可以使用特定的描述性字符串,例如“shortTime”将会把时间格式为12:05 pm这样的。ng提供了八种描述性的字符串,个人觉得这些有点多余,我完全可以根据自己的意愿组合出想要的格式,不愿意去记这么多单词~

3. filter(匹配子串)

这个名叫filter的filter(不得不说这名字起的,真让人容易混淆——!)用来处理一个数组,然后可以过滤出含有某个子串的元素,作为一个子数组来返回。可以是字符串数组,也可以是对象数组。如果是对象数组,可以匹配属性的值。它接收一个参数,用来定义子串的匹配规则。下面举个例子说明一下参数的用法,我用现在特别火的几个孩子定义了一个数组:

$scope.childrenArray = [
    {name:'kimi',age:3},
    {name:'cindy',age:4},
    {name:'anglar',age:4},
    {name:'shitou',age:6},
    {name:'tiantian',age:5}
  ];
$scope.func = function(e){return e.age>4;}
{{ childrenArray | filter : 'a' }} //匹配属性值中含有a的
{{ childrenArray | filter : 4 }} //匹配属性值中含有4的
{{ childrenArray | filter : {name : 'i'} }} //参数是对象,匹配name属性中含有i的
{{childrenArray | filter : func }} //参数是函数,指定返回age>4的

4. json(格式化json对象)

json过滤器可以把一个js对象格式化为json字符串,没有参数。这东西有什么用呢,我一般也不会在页面上输出一个json串啊,官网说它可以用来进行调试,嗯,是个不错的选择。或者,也可以用在js中使用,作用就和我们熟悉的JSON.stringify()一样。用法超级简单:

{{ jsonTest | json}}

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

limitTo过滤器用来截取数组或字符串,接收一个参数用来指定截取的长度,如果参数是负值,则从数组尾部开始截取。个人觉得这个filter有点鸡肋,首先只能从数组或字符串的开头/尾部进行截取,其次,js原生的函数就可以代替它了,看看怎么用吧:

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

6. lowercase(小写)

把数据转化为全部小写。太简单了,不多解释。同样是很鸡肋的一个filter,没有参数,只能把整个字符串变为小写,不能指定字母。怎么用我都懒得写了。

7. uppercase(大写)

同上。

8. number(格式化数字)

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

{{ num | number : 2 }}

9. orderBy(排序)

orderBy过滤器可以将一个数组中的元素进行排序,接收一个参数来指定排序规则,参数可以是一个字符串,表示以该属性名称进行排序。可以是一个函数,定义排序属性。还可以是一个数组,表示依次按数组中的属性值进行排序(若按第一项比较的值相等,再按第二项比较),还是拿上面的孩子数组举例:

<div>{{ childrenArray | orderBy : 'age' }}</div>   //按age属性值进行排序,若是-age,则倒序
<div>{{ childrenArray | orderBy : orderFunc }}</div>  //按照函数的返回值进行排序
<div>{{ childrenArray | orderBy : ['age','name'] }}</div> //如果age相同,按照name进行排序

内置的过滤器介绍完了,写的我都快睡着了。。。正如你所看到的,ng内置的过滤器也并不是万能的,事实上好多都比较鸡肋。更个性化的需求就需要我们来定义自己的过滤器了。

自定义过滤器

我们需要借助于module中的filter来定义一个函数,这个函数接收输入值,然后经过一系列的处理返回我们想要的结果,比如下面一个例子,实现返回数组中下标为奇数的值。

app.filter('odditems',function(){
  return function(inputArray){
    var array = [];
    for(var i=0;i<inputArray.length;i++){
      if(i%2!==0){
        array.push(inputArray[i]);
      }
    }
    return array;
  }
});

格式就是这样,你的处理逻辑就写在内部的那个闭包函数中。你也可以让自己的过滤器接收参数,参数就定义在return的那个函数中,作为第二个参数,或者更多个参数也可以。

过滤器的两种用法

1、在模板中使用filter

我们可以直接在{{}}中使用filter,跟在表达式后面用 | 分割,语法如下:

{{ expression | filter }}

也可以多个filter连用,上一个filter的输出将作为下一个filter的输入(怪不得这货长的跟管道一个样。。)

{{ expression | filter1 | filter2 | ... }}

filter可以接收参数,参数用 : 进行分割,如下:

{{ expression | filter:argument1:argument2:... }}

除了对{{}}中的数据进行格式化,我们还可以在指令中使用filter,例如先对数组array进行过滤处理,然后再

循环输出:

<span ng-repeat="a in array | filter ">

2. 在controller和service中使用filter

我们的js代码中也可以使用过滤器,方式就是我们熟悉的依赖注入,例如我要在controller中使用currency过滤器,只需将它注入到该controller中即可,代码如下:

app.controller('testC',function($scope,currencyFilter){
  $scope.num = currencyFilter(123534);
}

在模板中使用{{num}}就可以直接输出$123,534.00了!在服务中使用filter也是同样的道理。

此时你可能会有疑惑,如果我要在controller中使用多个filter,难道要一个一个注入吗,这岂不太费劲了?小兄弟莫着急~ng提供了一个$filter服务可以来调用所需的filter,你只需注入一个$filter就够了,使用方法如下:

app.controller('testC',function($scope,$filter){
  $scope.num = $filter('currency')(123534);
  $scope.date = $filter('date')(new Date(),"yyyy-MM-dd hh:mm:ss EEEE");
}

可以达到同样的效果。好处是你可以方便使用不同的filter了。

小结

以上是关于angularJS中过滤器的一些基本用法,都非常的简单,小编在这整理一下会印象深刻一些,filter的学习没有什么难的地方,到时候我们可以直接查询相关的文档就可以了。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 #Javascript
AngularJS服务service用法总结
Dec 13 #Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 #Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 #Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 #Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 #Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 #Javascript
You might like
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
js实现轮播图特效
2020/05/28 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
用Python实现换行符转换的脚本的教程
2015/04/16 Python
基于Python os模块常用命令介绍
2017/11/03 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
python实现杨氏矩阵查找
2019/03/02 Python
详解python调用cmd命令三种方法
2019/07/08 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
研究生自荐信
2013/10/09 职场文书
咨询公司各岗位职责
2013/12/02 职场文书
计算机专业职业生涯规划范文
2014/01/19 职场文书
手工社团活动方案
2014/02/17 职场文书
餐饮营销方案
2014/02/23 职场文书
质量承诺书范文
2014/03/27 职场文书
离婚纠纷代理词
2015/05/23 职场文书
孝女彩金观后感
2015/06/10 职场文书
小数乘法教学反思
2016/02/22 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL