详解AngularJS中的filter过滤器用法
系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点。这篇简单说一下angularjs的filter功能,angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的。
一,内置的过滤器
1,uppercase,lowercase大小转换
1
2
|
{{ "lower cap string" | uppercase }} //结果:LOWER CAP STRING {{ "TANK is GOOD" | lowercase }} //结果:tank is good |
|这里的竖线是一种管道功能,如果对linux比较熟悉的话,这块的|根linux的管道功能,基本是一样的
2,json格式化
1
|
{{ {foo: "bar" , baz: 23} | json }} //结果:{ "foo": "bar", "baz": 23 } |
注意:bza没格式前是没有双引号的,格式化后就转换成了json数据了。
3,date格式化
1
2
3
|
{{ 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
2
|
{{ 1.234567 | number:1 }} //结果:1.2 {{ 1234567 | number }} //结果:1,234,567 |
5,currency货币格式化
1
2
|
{{ 250 | currency }} //结果:$250.00 {{ 250 | currency: "RMB ¥ " }} //结果:RMB ¥ 250.00 |
6,filter查找
1
2
3
4
5
6
7
8
9
10
11
12
13
|
{{ [{ "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字符串,对像的截取
1
2
3
4
5
6
7
|
{{ "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对像排序
1
2
3
4
5
6
7
8
9
|
{{ [{ "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
1
2
3
4
5
|
angular.module( 'tanktest' , []).filter( 'tankreplace' , function () { return function (input) { return input.replace(/tank/, "=====" ) }; }); |
2,app.js中加载这个module
1
2
3
4
5
6
|
var phonecatApp = angular.module( 'phonecatApp' , [ 'ngRoute' , 'phonecatControllers' , 'facebookControllers' , 'tanktest' ]); |
3,html中调用
1
|
{{ "TANK is GOOD" | lowercase |tankreplace}} //结果:===== is good |
注意:| lowercase |tankreplace管道命令可以有多个
三、filter的两种使用方法
1. 在模板中使用filter
我们可以直接在{{}}中使用filter,跟在表达式后面用 | 分割,语法如下:
1
|
{{ expression | filter }} |
也可以多个filter连用,上一个filter的输出将作为下一个filter的输入(怪不得这货长的跟管道一个样。。)
1
|
{{ expression | filter1 | filter2 | ... }} |
filter可以接收参数,参数用 : 进行分割,如下:
1
|
{{ expression | filter:argument1:argument2:... }} |
除了对{{}}中的数据进行格式化,我们还可以在指令中使用filter,例如先对数组array进行过滤处理,然后再循环输出:
1
|
<span ng-repeat= "a in array | filter " > |
2. 在controller和service中使用filter
我们的js代码中也可以使用过滤器,方式就是我们熟悉的依赖注入,例如我要在controller中使用currency过滤器,只需将它注入到该controller中即可,代码如下:
1
2
3
|
app.controller( 'testC' , function ($scope,currencyFilter){ $scope.num = currencyFilter(123534); } |
在模板中使用{{num}}就可以直接输出$123,534.00了!在服务中使用filter也是同样的道理。
此时你可能会有疑惑,如果我要在controller中使用多个filter,难道要一个一个注入吗,这岂不太费劲了?小兄弟莫着急~ng提供了一个$filter服务可以来调用所需的filter,你只需注入一个$filter就够了,使用方法如下:
1
2
3
4
|
app.controller( 'testC' , function ($scope,$filter){ $scope.num = $filter( 'currency' )(123534); $scope.date = $filter( 'date' )( new Date()); } |
可以达到同样的效果。好处是你可以方便使用不同的filter了。
详解AngularJS中的filter过滤器用法的更多相关文章
- 详解 javascript中offsetleft属性的用法(转)
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
- 详解Vue中watch的高级用法
我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...
- angularjs中的filter(过滤器)——格式化日期的date
date过滤器的功能是基于要求的格式格式化一个日期成为一个字符串. 格式化字符串的基本参数: 'yyyy': 用4位数字表示年(例如:AD 1 => 0001, AD 2010 => 20 ...
- 详解AngularJS中的依赖注入
点击查看AngularJS系列目录 依赖注入 一般来说,一个对象只能通过三种方法来得到它的依赖项目: 我们可以在对象内部创建依赖项目 我们可以将依赖作为一个全局变量来进行查找或引用 我们可以将依赖传递 ...
- 详解MySQL中concat函数的用法(连接字符串)
MySQL中concat函数 使用方法: CONCAT(str1,str2,…) 返回结果为连接参数产生的字符串.如有任何一个参数为NULL ,则返回值为 NULL. 注意: 如果所有参数均为非二进制 ...
- CSS学习笔记(9)--详解CSS中:nth-child的用法
详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...
- 详解 SWT 中的 Browser.setUrl(String url, String postData, String[] headers) 的用法
http://hi.baidu.com/matrix286/item/b9e88b28b90707c9ddf69a6e ———————————————————————————————————————— ...
- 详解Linux中的cat文本输出命令用法
作系统 > LINUX > 详解Linux中的cat文本输出命令用法 Linux命令手册 发布时间:2016-01-14 14:14:35 作者:张映 我要评论 这篇 ...
- 【转】logback logback.xml常用配置详解(三) <filter>
原创文章,转载请指明出处:http://aub.iteye.com/blog/1110008, 尊重他人即尊重自己 详细整理了logback常用配置, 不是官网手册的翻译版,而是使用总结,旨在更快更透 ...
随机推荐
- PHP 正则表达式语法
则表达式简介 在某些应用中,往往有时候需要根据一定的规则来匹配(查找)确认一些字符串,如要求用户输入的 QQ 号码为数字且至少 5 位.用于描述这些规则的工具就是正则表达式. 最简单的匹配 最简单的匹 ...
- HBase-初看HBase
0.95版本hbase 单机模式下所有的服务都运行在一个JVM上,包括HBase和zookeeper.使用的是本地文件系统 日志默认放在目录下logs文件夹中 基本命令: create 'table' ...
- Android进阶笔记12:Manymo(在线安卓系统模拟器工具)
Manymo: 在线安卓系统模拟器工具是一款启动速度快,且在浏览器中就能运行流畅.你可以使用它来测试你的安卓应用,他最多能支持42种屏幕尺寸和系统版本. 长久以来,Android开发者面临的困境之一就 ...
- APK文件安装模拟器和ADB命令的使用
1.安装APK文件到模拟器 Android手机使用的执行文件为APK格式,类似于Windows平台的exe文件.在Android模拟器中安装APK文件有多种方法,如果你是开发人员,可以通过Eclips ...
- CSS-Sprite-Generator丨CSS雪碧在线生成器
http://cn.spritegen.website-performance.org/ Css Sprite Tools实现背景图片整合 http://www.onlinedown.net/soft ...
- poj 3250 栈应用
#include<iostream> #include<cstring> #include<algorithm> #include<cstdio> #d ...
- poj 3155 最大密度子图
思路: 这个还是看的胡伯涛的论文<最小割在信息学竞赛中的应用>.是将最大密度子图问题转化为了01分数规划和最小割问题. 直接上代码: #include <iostream> # ...
- Android中IntentService的原理及使用
在Android开发中,我们或许会碰到这么一种业务需求,一项任务分成几个子任务,子任务按顺序先后执行,子任务全部执行完后,这项任务才算成功.那么,利用几个子线程顺序执行是可以达到这个目的的,但是每个线 ...
- wap测试学习
注意要点 UI元素 修改源码 物理键操作(回车.确认) 焦点 习惯性操作(前进.后退.屏幕翻转和停止) 刷新 重启服务器 重启浏览器 异常关闭 书签 cookies/session 缓存 接口 URL ...
- Sharepoint 列表
1.将SharePoint 2010列表数据使用Access打开 在SharePoint 2010新增加了对列表在Access客户端的打开,可以在Microsoft Access 中处理列表中的项目, ...