• 引言
• 在表达式中使用过滤器
  • 1 currency过滤器的使用
  • 2 lowercase过滤器的使用
  • 3 uppercase过滤器的使用
  • 4 json过滤器的使用
  • 5 data过滤器的使用
  • 6 number过滤器的使用
  • 7 limitTo过滤器的使用
  • 8 orderBy过滤器的使用
  • 9 filter过滤器的使用
• 过滤器在指令中的使用
• 过滤器在服务中的使用js代码中使用
  • 1 lowercase过滤器
  • 2 json过滤器
  • 3 uppercase过滤器
  • 4 limitTo过滤器
  • 5 date过滤器
  • 6 currency过滤器
  • 7 number过滤器
  • 8 orderBy过滤器
  • 9 filter过滤器
  • 10 过滤器在js对象使用总结

1.引言

      在本篇博客中主要介绍一下AngularJS过滤器，过滤器主要应用于表达式，部分指令，过滤器还可以应用在控制器中（过滤器服务），AngularJS一共给我们提供了9种过滤器，分别为：currency,date,filter,json,limitTo,lowercase,number,orderBy,uppercase,首先我们看一下这个每一种过滤器所起到的作用：

• currency：格式化数字为货币形式
• date：格式化date对象到字符串
• filter：从array中选择一个条目子集，并作为一个新数组返回
• json：允许转换一个JavaScript对象到JSON字符串
• limitTo：截取字符串
• lowercase ：转换字符串为小写形式。
• number : 格式化数字到文本。
• orderBy：字符串按照字母排序
• uppercase：转换字符串到大写形式。

上述九种过滤器便是AngularJS提供的过滤器，接下来我们就来看看过滤器的各种用法。

2. 在表达式中使用过滤器

2.1 currency过滤器的使用

      currency过滤器主要用于货币的格式化，它的使用方式为：{{ currency_expression | currency : symbol}}

• currency_expression：表示AngularJS表达式
• currency：代表使用 currency过滤器
• symbol：是一个可选参数，如果不写，默认是美元符。

      我们看一下这个过滤器的使用，代码如下：

• 如果不写symbol参数

    {{100|currency}} //输出结果为：$100.00

• 如果写symbol参数（也就是说：symbol参数控制货币的符号）

{{100|currency:'&&&&'}} //输出结果为：&&&&100.00
{{100|currency:'￥'}} //输出结果为：￥100.00

2.2 lowercase过滤器的使用

• 这个过滤器很简单就是将字符串字母变为小写字母{{ uppercase_expression | lowercase}}，代码如下：

//注意这里写的是字符串
{{'ABCD'|lowercase}}//输出结果为：abcd

2.3 uppercase过滤器的使用

• 这个过滤器很简单就是将字符串字母变为大写字母{{ uppercase_expression | uppercase}}，代码如下：

{{'abcd'|uppercase}}//输出结果为：ABCD

2.4 json过滤器的使用

• json过滤器也非常简单，没有任何参数，只是将json对象转换成字符串输出，该过滤器为：{{ json_expression | json}}，代码如下：

{{ {foo: "bar", baz: 23} | json }}//输出结果为：{ "foo": "bar", "baz": 23 }

2.5 data过滤器的使用

      data过滤器是格式化输出我们的data对象，该过滤器为：{{ date_expression | date : format}}

• date_expression:是表达式
• date:使用data过滤器
• format：可选参数，日期输出的格式化

接下来我们使用一下这个过滤器

• 不使用format参数

        //这是我们的控制器var app=angular.module("myApp",[]);app.controller("firstController", function ($scope) {$scope.time=new Date();});//这是我们的表达式{{ time | date }}//输出结果为：Feb 7, 2017

• 使用format参数

        //这是我们的控制器var app=angular.module("myApp",[]);app.controller("firstController", function ($scope) {$scope.time=new Date();});//这是我们的表达式{{ time | date :"'yyyy-MM-dd"}}//输出结果为：2017-02-07

2.6 number过滤器的使用

关于number过滤器的使用，是格式化数字输出，这个过滤器为：{{ number_expression | number : fractionSize}}

• number_expression：表达式
• number：使用number过滤器
• fractionSize：可选参数，可以控制数字的小数点位数,，如果不填，默认为3

现在我们看一下这个过滤器的使用。

• 没有使用fractionSize参数

{{ 1.234567 | number }}//输出结果为：1.234

• 使用fractionSize参数

{{ 1.234567 | number:6 }}//输出结果为：1.234567 

2.7 limitTo过滤器的使用

limitTo过滤器是用来截取字符串和对对象，他的使用方式为：{{ limitTo_expression | limitTo : limit}}

• limitTo_expression：字符串表达式或者对象
• limitTo:使用limitTo过滤器
• limit：代表字符串截取的长度，如果是正数是从前面截取，如果是负数是从后面截取

接下来我们看一下这个过滤器的使用

• 字符串的截取

{{ 'abcde' | limitTo:2 }}//运行结果：ab
{{ 'abcde' | limitTo:-2 }}//运行结果：de

• 对象的截取

        //创建我们的控制器var app=angular.module("myApp",[]);app.controller("firstController", function ($scope) {$scope.persons= [{"age": 20,"id": 10,"name": "iphone"},{"age": 12,"id": 11,"name": "sunm xing"},{"age": 44,"id": 12,"name": "test abc"}]});//表达式{{persons|  limitTo:1}}//运行结果[{"age":20,"id":10,"name":"iphone"}]

2.8 orderBy过滤器的使用

关于orderBy过滤器的使用：字符串按字母顺序排序，数字按大小排序，这个表达式为：{{ orderBy_expression | orderBy : expression : reverse}}

• orderBy_expression：排序的字符串
• orderBy：使用orderBy过滤器
• expression:一个决定顺序的声明
• reverse：是一个boollen类型，是正序排列还是逆序排列,如果不填默认为false

接下来我们用几个例子来看一下这个过滤器的使用：

• 根据id正序排列

    //定义我们的控制器var app=angular.module("myApp",[]);app.controller("firstController", function ($scope) {$scope.persons= [{"age": 20,"id": 10,"name": "iphone"},{"age": 12,"id": 11,"name": "sunm xing"},{"age": 44,"id": 12,"name": "test abc"}]});//我们的表达式，根据id字段正序排序{{persons|  orderBy:'id':false}}//上面表达式等价于{{persons|  orderBy:'id'}}//运行结果[{"age":20,"id":10,"name":"iphone"},{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]

• 根据id逆序排列

    //定义我们的控制器var app=angular.module("myApp",[]);app.controller("firstController", function ($scope) {$scope.persons= [{"age": 20,"id": 10,"name": "iphone"},{"age": 12,"id": 11,"name": "sunm xing"},{"age": 44,"id": 12,"name": "test abc"}]});//我们的表达式，根据id字段正序排序{{persons|  orderBy:'id':true}}//运行结果[{"age":44,"id":12,"name":"test abc"},{"age":12,"id":11,"name":"sunm xing"},{"age":20,"id":10,"name":"iphone"}]

2.9 filter过滤器的使用

filter过滤器主要用于查找，也就是在array中选择一定的条目，然后返回一个新数组，该过滤器的形式为：{{ filter_expression | filter : expression : comparator}}

• filter_expression:代表数组源
• filter：使用filter过滤器
• expression：筛选的条件
• comparator：是一个比较器，比如筛选的时候是否区分大小写，这个可以是一个函数对象，用于比较。

现在我们来看一下这个过滤器的使用

• 代码实现

    //定义我们的控制器var app=angular.module("myApp",[]);app.controller("firstController", function ($scope) {$scope.persons= [{"age": 20,"id": 10,"name": "iphone"},{"age": 12,"id": 11,"name": "sunm xing"},{"age": 44,"id": 12,"name": "test abc"}]});//表达式（查找带有字符串s的行）{{persons|filter:'s'}}//运行结果[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]//表达式（注意：{'name':'iphone'}后面有一个空格）查找name字段为iphone的对象{{ persons | filter:{'name':'iphone'} }}//运行结果[{"age":20,"id":10,"name":"iphone"}]

3.过滤器在指令中的使用

关于过滤器在指令中的使用在这里举一个例子ng-repeat指令中的使用，代码如下：

        //控制器的实现var app=angular.module("myApp",[]);app.controller("firstController", function ($scope) {$scope.persons= [{"age": 20,"id": 10,"name": "iphone"},{"age": 12,"id": 11,"name": "sunm xing"},{"age": 44,"id": 12,"name": "test abc"}]});//html片段（根据name字段筛选对象）"text" ng-model="my">
"p in persons|filter:{name:my}">{{p.id}}---{{p.age}}---{{p.name}}

• 运行结果

4. 过滤器在服务中的使用（js代码中使用）

      在前面我们使用了过滤器，分别是在表达式中使用，还有就是在指令中使用，其实过滤器的使用还可以在js代码中使用，AngularJS为我们提供了一个$filter服务，此服务可以注入到我们js代码中使用，接下来我们就来简单的看一下这9种过滤器在js代码中如何使用呢？

4.1 lowercase过滤器

        var app=angular.module("myApp",[]);app.controller("firstController", function ($scope,$filter) {$scope.text=$filter('lowercase')("ABCD")//text值为abcd});

4.2 json过滤器

        var app=angular.module("myApp",[]);app.controller("firstController", function ($scope,$filter) {$scope.text=$filter('json')({name:"wpx",age:20})});//text值是字符串：{ "name": "wpx", "age": 20 }

4.3 uppercase过滤器

        var app=angular.module("myApp",[]);app.controller("firstController", function ($scope,$filter) {$scope.text=$filter('uppercase')("abcd")//text值为ABCD});

4.4 limitTo过滤器

        var app=angular.module("myApp",[]);app.controller("firstController", function ($scope,$filter) {$scope.text=$filter('limitTo')("abcde","2")});//text值为ab

        var app=angular.module("myApp",[]);app.controller("firstController", function ($scope,$filter) {$scope.text=$filter('limitTo')("abcde","-2")});//text值为de

4.5 date过滤器

        var app=angular.module("myApp",[]);app.controller("firstController", function ($scope,$filter) {$scope.text=$filter('date')(new Date(),"yyyy-MM-dd")});//text返回值为：2017-02-07

4.6 currency过滤器

        var app=angular.module("myApp",[]);app.controller("firstController", function ($scope,$filter) {$scope.text=$filter('currency')(20,"%")});//text的值为：%20.00

4.7 number过滤器

        var app=angular.module("myApp",[]);app.controller("firstController", function ($scope,$filter) {$scope.text=$filter('number')(20,"4")});//text的值为：20.0000

4.8 orderBy过滤器

        //逆序排列我们的数组，返回值text是一个对象数组var app=angular.module("myApp",[]);app.controller("firstController", function ($scope,$filter) {$scope.text=$filter('orderBy')([{"age": 20,"id": 10,"name": "iphone"},{"age": 12,"id": 11,"name": "sunm xing"},{"age": 44,"id": 12,"name": "test abc"}],"id",true)});

4.9 filter过滤器

        var app=angular.module("myApp",[]);app.controller("firstController", function ($scope,$filter) {$scope.text=$filter('filter')([{"age": 20,"id": 10,"name": "iphone"},{"age": 12,"id": 11,"name": "sunm xing"},{"age": 44,"id": 12,"name": "test abc"}],{name:"iphone"})});//返回值是一个对象，是filter过滤器筛选之后的结果

4.10 过滤器在js对象使用总结

过滤器在javascript中的使用一般形式是这样的：$filter()()

• $filter服务有两个参数，第一个参数是过滤器的名称，第二个参数是一个参数列表。
• 我们来看该服务的第二个参数，第二个参数的第一个是输入的值，后面的参数分别为过滤器所需要的内容。
• 以orderBy过滤器为例，看一下这个服务$filter('orderBy')(array, expression, reverse),我们看第二个参数array是输入的排序数组，expression是过滤表达式，reverse代表是否逆序排列。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！