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 相关文章推荐
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
vue实现随机验证码功能的实例代码
Apr 30 Javascript
JS内置对象和Math对象知识点详解
Apr 03 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
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
php生成gif动画的方法
2015/11/05 PHP
php实现等比例压缩图片
2018/07/26 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
python异步任务队列示例
2014/04/01 Python
python在文本开头插入一行的实例
2018/05/02 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
《梅花魂》教学反思
2014/04/30 职场文书
伊索寓言教学反思
2014/05/01 职场文书
主题实践活动总结
2014/05/08 职场文书
环保口号大全
2014/06/12 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
初中同学会致辞
2015/08/01 职场文书
销售人员管理制度
2015/08/06 职场文书
军训决心书范文
2015/09/22 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
一行代码python实现文件共享服务器
2021/04/22 Python
php访问对象中的成员的实例方法
2021/11/17 PHP
vue的项目如何打包上线
2022/04/13 Vue.js