PhoneGap中文网

 找回密码
 立即注册
PhoneGap中文网 视频教程 angularjs教程 查看内容

第七讲 Angularjs filter过滤器以及自定义filter过滤器 详解

2015-5-4 21:32| 发布者: admin| 查看: 10494| 评论: 0

摘要: 学习要点: Angularjs filter过滤器控制器中使用 filter自定义filter过滤器 主讲教师:(树根)合作网站:www.phonegap100.com (PhoneGap中文网)合作网站:www.itying.com (IT营) Angularjs filter过滤器 uppercas ...


免费视频教程下载地址:





学习要点:

  1. Angularjs filter过滤器

  2. 控制器中使用 filter

  3. 自定义filter过滤器

                                                               

    主讲教师:(树根)

     

    合作网站:www.phonegap100.com (phonegap中文网)

    合作网站:www.itying.com  (IT)

     

 

  1. Angularjs  filter过滤器

 

  1. uppercaselowercase大小转换

 

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

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

 

  1. json格式化

 

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

 

  1. 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

 

  1. number格式化

 

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

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

 

  1. currency货币格式化

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

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

 

  1. 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'} }}   //查找nameiphone的行

 

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

 

 

  1. 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"}]

 

  1. 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升序排

 

 

  1. 控制器使用 filter

 

$scope.name = $filter('date')('236478234','hh');

$scope.name = $filter('uppercase')('hello');

 

 

  1. Angularjs自定义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管道命令可以有多个

 

 


头晕

难过

扯淡
2

不解

搞笑

支持

超赞

欠扁

刚表态过的朋友 (2 人)

相关阅读

最新评论

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-7-17 18:47 , Processed in 0.057648 second(s), 20 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部