（8）AngularJS 1.X 之过滤器

2024-04-27 15:11:25

字体：大中小

来源：转载

供稿：网友

引言在表达式中使用过滤器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字段筛选对象） <input type="text" ng-model="my"> <div> <li ng-repeat="p in persons|filter:{name:my}">{{p.id}}---{{p.age}}---{{p.name}}</li> </div>运行结果

这里写图片描述

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代表是否逆序排列。

上一篇：抓住神经猫的学习与实践

下一篇：em&amp;&amp;rem