AngularJS学习之filter过滤器的用法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS学习之filter过滤器的用法相关的知识,希望对你有一定的参考价值。

系统的学习angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点。这篇简单说一下angularjsfilter功能,angularjsfilter功能可分为二种,一种是内置的过滤器,一种是自定义的。

一,内置的过滤器

1uppercaselowercase大小转换

{{ "lower cap string" | uppercase }}   //结果:LOWER CAP STRING

{{ "TANK is GOOD" | lowercase }}     //结果:tank is good

|这里的竖线是一种管道功能,如果对linux比较熟悉的话,这块的|根linux的管道功能,基本是一样的

2json格式化

{{ {foo: "bar", baz: 23} | json }}  //结果:{ "foo": "bar", "baz": 23 }

注意:bza没格式前是没有双引号的,格式化后就转换成了json数据了。

3date格式化

{{ 1304375948024 | date }}             //结果:May 3, 2011

{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}   //结果:05/03/2011 @ 6:39AM

{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}  //结果:2011-05-03 06:39:08

4number格式化

{{ 1.234567 | number:1 }}  //结果:1.2

{{ 1234567 | number }}    //结果:1,234,567

5currency货币格式化

{{ 250 | currency }}         //结果:$250.00

{{ 250 | currency:"RMB ¥ " }}    //结果:RMB ¥ 250.00

6filter查找

{{ [{"age": 20,"id": 10,"name": "iphone"},

{"age": 12,"id": 11,"name": "sunm xing"},

{"age": 44,"id": 12,"name": "test abc"}

] | filter:’s’}}  //查找含有有s的行

//上例结果:[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]

{{ [{"age": 20,"id": 10,"name": "iphone"},

{"age": 12,"id": 11,"name": "sunm xing"},

{"age": 44,"id": 12,"name": "test abc"}

] | filter:{’name’:’iphone’} }}  //查找nameiphone的行

//上例结果:[{"age":20,"id":10,"name":"iphone"}]

7limitTo字符串,对像的截取

{{ "i love tank" | limitTo:6 }}      //结果:i love

{{ "i love tank" | limitTo:-4 }}     //结果:tank

{{ [{"age": 20,"id": 10,"name": "iphone"},

{"age": 12,"id": 11,"name": "sunm xing"},

{"age": 44,"id": 12,"name": "test abc"}

] | limitTo:1 }}   //结果:[{"age":20,"id":10,"name":"iphone"}]

8orderBy对像排序

{{ [{"age": 20,"id": 10,"name": "iphone"},

{"age": 12,"id": 11,"name": "sunm xing"},

{"age": 44,"id": 12,"name": "test abc"}

] | orderBy:’id’:true }}    //id降序排

{{ [{"age": 20,"id": 10,"name": "iphone"},

{"age": 12,"id": 11,"name": "sunm xing"},

{"age": 44,"id": 12,"name": "test abc"}

] | orderBy:’id’ }}      //根据id升序排

二,自定filter功能

我找了一个基本angularjsmvc框架,phonecat,自定义filter也是在这基础写的,这个框架挺好用的。

1filters.js添加一个module

angular.module(’tanktest’, []).filter(’tankreplace’, function() {

return function(input) {

return input.replace(/tank/, "=====")

};

});

2app.js中加载这个module

var phonecatApp = angular.module(’phonecatApp’, [

’ngRoute’,

’phonecatControllers’,

’facebookControllers’,

’tanktest’

]);

3html中调用

{{ "TANK is GOOD" | lowercase |tankreplace}}  //结果:===== is good

注意:| lowercase |tankreplace管道命令可以有多个

三、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. controllerservice中使用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了。

来源: Linux视野


以上是关于AngularJS学习之filter过滤器的用法的主要内容,如果未能解决你的问题,请参考以下文章

ASP.NET MVC 学习之过滤器你怎么看?

ASP.NET MVC学习之过滤器篇

AngularJS学习之compile与link函数详解

angularjs中的filter(过滤器)

AngularJS的Filter用法详解

Django学习之十三:提高页面开发效率减少冗余的模板系统