AngularJs功能（五）--过滤器

leon 发布于2019-08-22 13:58 / 2584人阅读

摘要：过滤器过滤器正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。表单的控制功能主要涉及到数据验证以及表单控件的增强。格式化数字过滤器可以为一个数字加上千位分割，像这样，。

过滤器 Filter

过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上。

过滤器通常是伴随标记来使用的，将你model中的数据格式化为需要的格式。

表单的控制功能主要涉及到数据验证以及表单控件的增强。关于表单控件会多带带模块做讲解。

内置过滤器

先说angular自带的几种过滤器

1.currency (货币处理)
使用currency可以将数字格式化为货币，默认是美元符号，你可以自己传入所需的符号，例如我传入人民币：

 {{num | currency : "￥"}}

2.date (日期格式化)
原生的js对日期的格式化能力有限，angular提供的date过滤器基本可以满足一般的格式化要求。用法如下：

{{date | date : "yyyy-MM-dd hh:mm:ss EEEE"}} date格式可设定

　　参数用来指定所要的格式， y年 M月 d日 h时 m分 s秒 E星期，你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。

3.filter(匹配字符串)
这个filter用来处理一个数组，然后可以过滤出含有某个字符串的元素，作为一个子数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。它接收一个参数，用来定义过滤元素的匹配规则。
例子如下：

$scope.demandArray = [
  {name:"lmc",age:23},
  {name:"lzx",age:24},
  {name:"lxy",age:24},
  {name:"lyj",age:26},
  {name:"fll",age:25}
];
$scope.func = function(e){return e.age>24;};

{{ demandArray | filter : "a" }} //匹配属性值中含有a的
{{ demandArray | filter : 4 }} //匹配属性值中含有4的
{{ demandArray | filter : {name : "i"} }} //参数是对象，匹配name属性中含有i的
{{ demandArray | 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(小写)
把数据转化为全部小写。没有参数，只能把整个字符串变为小写，不能指定字母。

7.uppercase(大写)
把数据转化为全部大写。没有参数，只能把整个字符串变为小写，不能指定字母。

8.number(格式化数字)
number过滤器可以为一个数字加上千位分割，像这样，123,456,789。同时接收一个参数，可以指定float类型保留几位小数：

{{ num | number : 2 }}

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

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

自定义过滤器

filter的自定义方式也很简单，使用module的filter方法，返回一个函数，该函数接收
输入值，并返回处理后的结果。

下面看一个给数字加百分比的一个自定义filter：

angular.module("MetronicApp").filter("numberToRMB",["$filter",function($filter) {
  return function (value) {
    var filter = $filter("currency");
    return filter(value,"￥");
  }
}])

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

更多自定义filter会在项目中详细讲解。

使用方法

1.在模板中使用filter

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

{{ expression | filter }}

也可以多个filter连用，上一个filter的输出将作为下一个filter的输入：

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

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

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

除了对

{{}}

中的数据进行格式化，我们还可以在指令中使用filter，例如先对数组array进行过滤处理，然后再循环输出：

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，并不需要一个一个注入，angular提供了一个$filter服务可以来调用所需的filter，你只需注入一个$filter就够了，使用方法如下：

app.controller("testC",function($scope,$filter){
  $scope.num = $filter("currency")(123534);　　
  $scope.date = $filter("date")(new Date());  
}

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

项目中会对使用到的filter做详细讲解。

云服务器 GPU云服务器五星星评价功能 AngularJS angularjs cdn cdn angularjs

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92686.html

【译】《精通使用AngularJS开发Web App》（五）

摘要：上一篇译精通使用开发四下一篇译精通使用开发六书名合作对象正如所见，提供了一种将对象组织为模块的方式。模块不仅可以注册可以直接被框架所调用的对象控制器，过滤器等，还可以使用任何应用开发者所定义的对象。上一篇：【译】《精通使用AngularJS开发Web App》（四）下一篇：【译】《精通使用AngularJS开发Web App》（六）书名：Mastering Web Applic...

PiscesYE 2019-08-19 14:29 评论0 收藏0
关于Angularjs中自定义指令一些有价值的细节和技巧

摘要：属性为时，指示优先级小于当前指令的指令都不执行，仅执行到本指令。作者：心叶时间：2018-04-22 10:58 一：自定义指令常用模板下面是大致的说明，不是全面的，后面来具体说明一些没有提及的细节和重要的相关知识： angular.module(yelloxingApp, []).directive(uiDirective, function() { return { ...

Markxu 2019-08-22 16:35 评论0 收藏0
AngularJS简述

流行框架简介 angularjs是一款非常优秀的前端高级JS框架，由谷歌团队开发维护，能够快速构建单页web应用，化繁为简无论是angularjs还是jQuery都是用原生JS封装的库：对代码进行封装，调用封装的方法，简化操作传统方式是用get方式获取元素，然后点方法 jQuery库实现了对获取方式的封装，对方法的封装框架：提供代码书写规则，按照规则去写代码，框架会帮我们实现响应的功能...

Jason 2019-08-23 11:25 评论0 收藏0
理解和学习AngularJS（一）

摘要：为指令赋值函数名，即可运行。它也是一个对象，指向应用程序作用域内的所有元素和执行上下文。简而言之，是与指令元素相关联的当前作用域，可以理解为视图和控制器间的一个通道。它们被组织为模块形式，之后可以被另一个引用。 Angularjs Angular是一款主旋律的MVVM框架，框架和传统的库不同：类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类...

EastWoodYang 2019-08-22 10:58 评论0 收藏0