当前位置: 首页 > 编程日记 > 正文

AngularJs--过滤器(filter)

过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等。ng内置了一些过滤器,它们是:currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。除此之外还可以自定义过滤器,这个就强大了,可以满足任何要求的数据处理。

过滤器的内容非常简单,只要明白了内置的如何使用,自己如何定义一个filter就OK了~今天系统的学习了下,下面做个介绍。

filter的两种使用方法

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()); }

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

ng的内置过滤器

ng内置了九种过滤器,使用方法都非常简单,看文档即懂。不过为了以后不去翻它的文档,我在这里还是做一个详细的记录。

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

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

自定义过滤器

filter的自定义方式也很简单,使用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的那个函数中,作为第二个参数,或者更多个参数也可以。

过滤器的基本知识就这些了。还是那句话,更多需要学习的还需项目的真正考验。那么,在项目来临之前,先打好基础吧~

(PS:忍不住要抱怨了,使用博客园的编辑器编辑的例子不知什么原因抽风不能动了,以前还是好好的。上一篇我试着使用了jsfiddle提供的内嵌代码,但访问速度又慢的跟蜗牛似的。唉,哪里有个好用的工具可以让我在博客中内嵌示例啊~)

转载于:https://www.cnblogs.com/huangshoushi/p/5984428.html

相关文章:

【一步步学小程序】1.创建项目以及TabBar

1.创建项目 如图&#xff0c;创建项目&#xff0c;输入项目名称、选择目录&#xff0c;AppID是唯一标识&#xff0c;我们可以先点如图红框内的测试号&#xff0c;自动生成一个AppID&#xff0c;然后点新建即创建完一个新项目。 2.创建3个页面 确保如图左上角的编译器按钮是…

Yii在window下的安装方法

首先&#xff0c;在http://www.yiichina.com/上下载yii 然后&#xff0c;配置系统环境变量&#xff0c;在win8下&#xff0c;按winx&#xff0c;找到系统->高级系统设置->环境变量->path 把php的运行环境&#xff0c;加入到环境变量中&#xff0c;以分号隔开。如&…

从新手到入门,如何进入协议分析的世界

“ 协议分析与还原自学及入门指南。”有部分朋友给我发消息&#xff0c;说对协议还原很感兴趣&#xff0c;但苦于没人指导&#xff0c;希望得到我的帮助&#xff0c;问我如何进行协议分析的学习。这篇文章从初学者的角度&#xff0c;编列了一个学习指南&#xff0c;希望能对协议…

C# 学习笔记01

想写一个app可以访问数据库&#xff0c;实现对数据库的查询&#xff0c;修改等&#xff0c;突然发现知识实在有限&#xff0c;故选择C#来实现此app。 使用简单的三层架构来作为此app的架构。表现层&#xff08;UI&#xff09;、业务逻辑层&#xff08;BLL&#xff09;、数据访问…

转载 iOS js oc相互调用(JavaScriptCore) --iOS调用js

iOS js oc相互调用&#xff08;JavaScriptCore&#xff09; 从iOS7开始 苹果公布了JavaScriptCore.framework 它使得JS与OC的交互更加方便了。 下面我们就简单了解一下这个框架 首先我导入framework 方法如下 点击Linked Frameworks and Libraries 的添加后 选择 JavaScriptCor…

【一步步学小程序】2.列表展示

我们上一节已经创建了一个可以点击切换的tabbar。这节我们开始正式敲代码&#xff0c;在首页上展示一个可以上下滚动的课程列表&#xff1a; 首先打开上一节的pages/home/homeMain/homeMain.wxml文件&#xff0c;布局相关代码都会在此文件中&#xff0c;小程序的布局方式类似H…

git分支的合并

原文&#xff1a; http://gitbook.liuhui998.com/3_3.html http://gitbook.liuhui998.com/5_3.html 一、如何分支的合并在git中&#xff0c;可以使用git merge 和git rebase两个命令来进行分支的合并。git merge 和git rebase在大体上都差不多&#xff0c;下文主要以git merg…

【一步步学小程序】3. 使用自定义组件(component)

上一节创建了一个包含多个课程数据的列表。这一节我们用自定义组件&#xff08;component&#xff09;&#xff0c;来优化列表页面&#xff0c;即如图&#xff0c;我们把每个课程单元格封装为组件。 使用组件的好处&#xff1a; 自定义组件可以在不同的页面中重复使用将复杂…

《lua程序设计(第二版)》学习笔记(五)-- 函数基础

-- 第 5 章 函数-- 一种对语句和表达式进行抽象的主要机制 print(os.date()); -- 打印日期 Sun Apr 20 12:44:46 2014 -- 一看到sun&#xff0c;感慨广州没有晴天 -- 函数没有参数也要括号 -- 特殊情况:只有一个参数的时候, 并且参数一个string&#xff0f;table构造…

HTTP协议中的chunked编码解析

“ HTTP协议中的chunked传输编码全接触。”在HTTP协议中&#xff0c;服务器发往客户端的数据中&#xff0c;通常都包括HTTP头和HTTP体&#xff0c;当存在HTTP体的时候&#xff0c;HTTP体的长度通常是由HTTP头内的“Content-Length”字段确定。就像下图&#xff1a;不过&#xf…

html-css实例

<!DOCTYPE html> <html><head><meta charset"utf-8" /><title>求签</title><style type"text/css">*{margin: 0px;padding: 0px;font-family: "微软雅黑",arial,sans-serif;}body{background: url(im…

【Swift】变量/常量/类型总结

1、变量&#xff08;Variable&#xff09; 变量&#xff0c;可以理解为存放某一类型的值的容器&#xff0c;如&#xff1a; var count:Int var shouldRemind:BOOL var text:String var list:[ChecklistItem]一个变量的数据类型&#xff0c;决定了它能存放什么类型的数据。有些…

ODBC更新记录集提示”记录集为只读“

创建的ODBC应用程序默认的记录集不具有只读属性&#xff0c;但是再更新记录表时会提示”记录集为只读“&#xff0c;这是为什么呢&#xff1f; 今天看书找到了答案&#xff1a; 因为MFC中的数据库类不支持需要连接两个或者多个表的记录集更新&#xff0c;如果选择数据源的时候选…

gzip格式分析与识别

“ 介绍gzip格式&#xff0c;识别gzip压缩的数据流量。”在协议分析过程中&#xff0c;经常会发现gzip压缩的数据&#xff0c;例如在HTTP协议中&#xff0c;在HTTP头中会标示&#xff0c;内容编码为gzip、DEFLATE。但是&#xff0c;还有很多情况&#xff0c;例如一些非HTTP协议…

CSS 和 JS 动画哪个更快

基于Javascript的动画暗中同CSS过渡效果一样&#xff0c;甚至更加快&#xff0c;这怎么可能呢&#xff1f;而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用&#xff0c;这又怎么可能呢&#xff1f; 本文逐一遍览了基于Javascript的DOM动画库&#xff0c;如Veloci…

C语言之分支结构 if(一)

一 程序的三种基本结构 顺序结构&#xff1a;程序从上往下依次执行&#xff0c;这个叫顺序结构 分支结构&#xff1a;有选择的执行或者不执行某段代码 循环结构&#xff1a;重复的执行某段代码 二 分支结构之if 最简单的俩种用法 (tips: if语句后面的大括号可以省略&#xff1a…

react-native安装Ant Design

1.集成Ant Design到项目 项目根目录中执行命令&#xff1a; npm install ant-design/react-native --save2.集成按需加载babel-plugin-import到项目 项目根目录中执行命令&#xff1a; npm install --save-dev babel-plugin-import3.创建.babelrc文件 根目录中创建新文件…

车联网APP,安全设施薄弱的山寨品

“ 目前的车联网APP&#xff0c;几乎没有安全性可言。”在网络上闲逛&#xff0c;一不小心&#xff0c;逛进了车联网的领地。物联网、车联网、IoT如火如荼&#xff0c;各个大佬、院士加持&#xff0c;看着相当的高大上。但是&#xff0c;在伟岸的外表下&#xff0c;到底真实的情…

CSS里总算是有了一种简单的垂直居中布局的方法了

<!DOCTYPE html> <html xmlns"http://www.w3.org/1999/xhtml"> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8"/><title>无标题文档</title><style type"text/css"&…

【星榜单】盘点那些坑爹的国产手机们

【星榜单】盘点那些坑爹的国产手机们 国产手机的那些坑爹事儿很多&#xff0c;中庸到基本大众脸的设计还算是有点良心的&#xff0c;那些奇葩的名字、所谓的高配低价低却又山寨级的做工、饥饿营销让你看得到买不到、伪小清新却又华而不实放眼过去的国产智能手机比比皆是&#x…

App Tracking Transparency被拒解决

App Tracking Transparency 如果使用了App Tracking Transparency&#xff0c;苹果要求在iOS 14.5及以上的版本中必须在弹框取得用户同意后&#xff0c;才可以跟踪用户。否则会被拒&#xff1a; 解决方案 参照官方文档说明&#xff08;https://developer.apple.com/documen…

ProtoBuf格式详解

“介绍protobuf编码格式。”protobuf是一种数据交换格式&#xff0c;又称PB编码&#xff0c;由Google开源&#xff0c;类似于Json、XML&#xff0c;但其内部是纯二进制格式&#xff0c;比Json&#xff0c;XML等格式要更精炼&#xff0c;主要用于数据的序列化和反序列化&#xf…

Android studio 第二次作业

作业要求&#xff1a; 作一个显示框里面分成三行 一二行占这个框的1/2 第三行独占1/2 第三行里面分成两列第一列占25%&#xff0c;第二列占75%。 屏幕显示效果 实现步骤&#xff1a; <LinearLayout android:orientation"vertical"注意这里是横向布局 …

Cable master (POJ No.1064)

二分搜索思想&#xff1a;bool C(double x)可以得到长度为x的绳子//#define LOCAL #include<stdio.h> #include<math.h> int const MAX_N10005; int const MAX_M100; double const INF100000000; int N,K; double d[MAX_N],lb,ub; //判断是否满足条件 bool C(doubl…

iOS 11 导致tableview 刷新之后漂移问题

在10 系好好的&#xff0c;在11系统刷新只有就会多一个白块。查询才返现&#xff0c;添加一下代码 完美解决此bugself.mainTableView.estimatedRowHeight 0; self.mainTableView.estimatedSectionHeaderHeight 0; self.mainTableView.estimatedSectionFooterHeight 0;

HTTP协议解析之Cookie

“ Cookie与身份认证。”提到HTTP协议&#xff0c;不可避免地都会牵涉到Cookie&#xff0c;可以说&#xff0c;Cookie作为HTTP的重要组成部分&#xff0c;促进了HTTP协议的发展壮大。HTTP协议如果没有了Cookie&#xff0c;将会是一个无状态&#xff0c;无法便捷地进行用户识别的…

libevent源码深度剖析十一

libevent源码深度剖析十一 ——时间管理 张亮 为了支持定时器&#xff0c;Libevent必须和系统时间打交道&#xff0c;这一部分的内容也比较简单&#xff0c;主要涉及到时间的加减辅助函数、时间缓存、时间校正和定时器堆的时间值调整等。下面就结合源代码来分析一下。 1 初始化…

CentOS 安装Apache

# centOS 安装A M P 环境[参考简书作者,非常感谢&#xff01;&#xff01;&#xff01;](https://www.jianshu.com/p/bc14ff0ab1c7) ## 一 Apache 环境安装 1 安装Apache > yum install httpd2 操作指令一览 > systemctl start httpd //启动apache > systemct…

使用admin lte 碰到访问Google字体的问题

下载了admin lte 的模板&#xff0c;运行的时候&#xff0c;发现很慢&#xff0c;看了一下console,发现adminlte.css里有import google的字体文件&#xff0c;众所周知的原因&#xff0c;无法访问&#xff0c;所以网页很慢&#xff0c;没办法&#xff0c;只能下载到本地了,cnbl…

如何突破DNS报文的512字节限制

“DNS协议大家都应该很熟悉&#xff0c;最近有同学问到如何获得UDP承载的超过512字节的DNS报文&#xff0c;借此机会&#xff0c;我们一起了解下DNS协议与报文长度有关的一些细节。”本文将讨论的是DNS协议在UDP承载时超过512字节的这一细节。在之前的文章里&#xff0c;对DNS协…