详解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 相关文章推荐
Javascript 学习笔记 错误处理
Jul 30 Javascript
Extjs入门之动态加载树代码
Apr 09 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
js通过canvas生成图片缩略图
Oct 02 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
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
ZF等常用php框架中存在的问题
2008/01/10 PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
PHP 函数执行效率的小比较
2010/10/17 PHP
php强制运行广告的方法
2014/12/01 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
ie focus bug 解决方法
2009/09/03 Javascript
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
浅析VUE防抖与节流
2020/11/24 Vue.js
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
浅谈Python基础—判断和循环
2019/03/22 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
计算机专业应届生求职信
2014/04/06 职场文书
cf战队收人口号
2014/06/21 职场文书
工作年限证明模板
2014/11/01 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL
java基础——多线程
2021/07/03 Java/Android