详解AngularJS中的filter过滤器用法


Posted in Javascript onJanuary 04, 2016

系统的学习了一下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了。

Javascript 相关文章推荐
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
JS返回顶部实例代码
Aug 09 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 #Javascript
深入浅析AngularJS中的module(模块)
Jan 04 #Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 #Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 #Javascript
详解Bootstrap glyphicons字体图标
Jan 04 #Javascript
详解Bootstrap按钮
Jan 04 #Javascript
详解Bootstrap四种图片样式
Jan 04 #Javascript
You might like
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
JavaScript 比较时间大小的代码
2010/04/24 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
使用python分析git log日志示例
2014/02/27 Python
python中异常捕获方法详解
2017/03/03 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
Numpy掩码式数组详解
2018/04/17 Python
python的sorted用法详解
2019/06/25 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
python实现简易学生信息管理系统
2020/04/05 Python
python读文件的步骤
2019/10/08 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
区域总监的岗位职责
2013/11/21 职场文书
给幼儿园老师的表扬信
2014/01/19 职场文书
中学教师培训制度
2014/01/31 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
经费申请报告范文
2015/05/18 职场文书
教育教学读书笔记
2015/07/02 职场文书
Python实现双向链表
2022/05/25 Python
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库