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 相关文章推荐
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
手写实现JS中的new
Nov 07 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开源建站平台小结
2010/04/22 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
开发用到的js封装方法(20种)
2018/10/12 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
使用python解析xml成对应的html示例分享
2014/04/02 Python
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
Django之模板层的实现代码
2019/09/09 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
HR喜欢的自荐信格式
2013/10/08 职场文书
办公室内勤工作职责
2013/12/11 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
出生医学证明样本
2014/01/17 职场文书
2014年保育员工作总结
2014/12/02 职场文书
教代会闭幕词
2015/01/28 职场文书
教师创先争优承诺书
2015/04/27 职场文书
毕业典礼主持词
2015/06/29 职场文书
酒店温馨提示语
2015/07/14 职场文书
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技