详解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 相关文章推荐
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
vue实现户籍管理系统
May 29 Javascript
js实现飞机大战游戏
Aug 26 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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
基于PHP+MySQL的聊天室设计
2006/10/09 PHP
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
php中使用url传递数组的方法
2015/02/11 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
python中通过预先编译正则表达式提高效率
2017/09/25 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
Python操作json的方法实例分析
2018/12/06 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
如何在python中实现随机选择
2019/11/02 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
学雷锋主题班会教案
2015/08/13 职场文书
节水宣传标语口号
2015/12/26 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers
Nginx跨域问题解析与解决
2022/08/05 Servers