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 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
js定时器实例分享
Dec 20 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 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初学者头疼问题总结
2006/10/09 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
js单例模式的两种方案
2013/10/22 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
上班迟到检讨书
2014/01/10 职场文书
大学班长的职责
2014/01/27 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python