无为清净楼资源网

详解AngularJS中的filter过滤器用法
网络编程 2024/11/20 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

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

一，内置的过滤器
1，uppercase，lowercase大小转换

{{ "lower cap string" | uppercase }}   //结果：LOWER CAP STRING 
{{ "TANK is GOOD" | lowercase }}     //结果：tank is good

 
｜这里的竖线是一种管道功能，如果对linux比较熟悉的话，这块的｜根linux的管道功能，基本是一样的
2，json格式化

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

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

{{ 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

4，number格式化

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

5，currency货币格式化

{{ 250 | currency }}         //结果：$250.00 
{{ 250 | currency:"RMB ￥ " }}    //结果：RMB ￥ 250.00

6，filter查找

{{ [{"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'} }}  //查找name为iphone的行 
 
//上例结果:[{"age":20,"id":10,"name":"iphone"}]

7，limitTo字符串，对像的截取

{{ "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"}]

8，orderBy对像排序

{{ [{"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功能
我找了一个基本angularjs的mvc框架，phonecat，自定义filter也是在这基础写的，这个框架挺好用的。
1，filters.js添加一个module

angular.module('tanktest', []).filter('tankreplace', function() { 
  return function(input) { 
    return input.replace(/tank/, "=====") 
  }; 
});

2，app.js中加载这个module

var phonecatApp = angular.module('phonecatApp', [ 
 'ngRoute', 
 'phonecatControllers', 
 'facebookControllers', 
 'tanktest' 
]);

3，html中调用

{{ "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. 在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了。

标签：
AngularJS,filter,JavaScript
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接