AngularJS之过滤器
AnularJS的过滤器用来格式化需要展示给用户的数据,有很多实用的内置过滤器,也可以自己编写。
在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如,假设我们希望将字符串
转换成大写,可以对字符串中的每个字符都单独进行转换操作,也可以使用过滤器:
{{ name | uppercase }}
在JavaScript代码中可以通过$filter来调用过滤器。例如,在JavaScript代码中使用lowercase
过滤器:
app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.name = $filter('lowercase')('Ari'); }]);
以HTML的形式使用过滤器时,如果需要传递参数给过滤器,只要在过滤器名字后面加冒号
即可。如果有多个参数,可以在每个参数后面都加入冒号。例如,数值过滤器可以限制小数点后
的位数,在过滤器后写上:2可以将2作为参数传给过滤器:
<!-- 显示:123.46 --> {{ 123.456789 | number:2 }}
1. currency
currecy过滤器可以将一个数值格式化为货币格式。用{{ 123 | currency }}来将123转化
成货币格式。
currecy过滤器允许我们自己设置货币符号。默认情况下会采用客户端所处区域的货币符号,
但是也可以自定义货币符号。
2. date
date过滤器可以将日期格式化成需要的格式。AngularJS中内置了几种日期格式,如果没有
指定使用任何格式,默认会采用mediumDate格式,下面的例子中展示了这个格式。
下面是内置的支持本地化的日期格式:
{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM --> {{ today | date:'short' }} <!-- 8/9/1312:09PM --> {{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 --> {{ today | date:'longDate' }} <!-- August 09, 2013 --> {{ today | date:'mediumDate' }}<!-- Aug 09, 2013 --> {{ today | date:'shortDate' }} <!-- 8/9/13 --> {{ today | date:'mediumTime' }}<!-- 12:09:02 PM --> {{ today | date:'shortTime' }} <!-- 12:09 PM -->
- 年份格式化
四位年份:{{ today | date:'yyyy' }} <!-- 2013 --> 两位年份:{{ today | date:'yy' }} <!-- 13 --> 一位年份:{{ today | date:'y' }} <!-- 2013 -->
- 月份格式化
英文月份:{{ today | date:'MMMM' }} <!-- August --> 英文月份简写:{{ today | date:'MMM' }} <!-- Aug --> 数字月份:{{ today |date:'MM' }} <!-- 08 --> 一年中的第几个月份:{{ today |date:'M' }} <!-- 8 -->
- 日期格式化
数字日期:{{ today|date:'dd' }} <!-- 09 --> 一个月中的第几天:{{ today | date:'d' }} <!-- 9 --> 英文星期:{{ today | date:'EEEE' }} <!-- Thursday --> 英文星期简写:{{ today | date:'EEE' }} <!-- Thu -->
- 小时格式化
24小时制数字小时:{{today|date:'HH'}} <!--00--> 一天中的第几个小时:{{today|date:'H'}} <!--0--> 12小时制数字小时:{{today|date:'hh'}} <!--12--> 上午或下午的第几个小时:{{today|date:'h'}} <!--12-->
- 分钟格式化
数字分钟数:{{ today | date:'mm' }} <!-- 09 --> 一个小时中的第几分钟:{{ today | date:'m' }} <!-- 9 -->
- 秒数格式化
数字秒数:{{ today | date:'ss' }} <!-- 02 --> 一分钟内的第几秒:{{ today | date:'s' }} <!-- 2 --> 毫秒数:{{ today | date:'.sss' }} <!-- .995 -->
下面是一些自定义日期格式的示例:
{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 --> {{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8--> {{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->
filter
filter过滤器可以从给定数组中选择一个子集,并将其生成一个新数组返回。
例如,用下面的过滤器可以选择所有包含字母e的单词:
{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }} <!-- ["Lerner","Likes","Eat"] -->
如果要过滤对象,可以使用上面提到的对象过滤器。例如,如果有一个由people对象组成的
数组,每个对象都含有他们最喜欢吃的食物的列表,那么可以用下面的形式进行过滤:
{{ [{ 'name': 'Ari', 'City': 'San Francisco', 'favorite food': 'Pizza' },{ 'name': 'Nate', 'City': 'San Francisco', 'favorite food': 'indian food' }] | filter:{'favorite food': 'Pizza'} }} <!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->
也可以用自定义函数进行过滤(在这个例子中函数定义在$scope上):
{{ ['Ari','likes','to','travel'] | filter:isCapitalized }} <!-- ["Ari"] -->
isCapitalized函数的功能是根据首字母是否为大写返回true或false,具体如下所示:
$scope.isCapitalized = function(str) { return str[0] == str[0].toUpperCase(); };
自定义过滤器
首先,创建一个模块用以在应用中进行引用
angular.module('myApp.filters', []) .filter('capitalize', function() { return function(input) { // input是我们传入的字符串 if (input) { return input[0].toUpperCase() + input.slice(1); } });
现在,如果想将一个句子的首字母转换成大写形式,可以用过滤器先将整个句子都转换成小
写,再把首字母转换成大写:
<!-- Ginger loves dog treats --> {{ 'ginger loves dog treats' | lowercase | capitalize }}
转载于:https://www.cnblogs.com/hutuzhu/p/4353699.html
AngularJS之过滤器相关推荐
- 走进AngularJs(七) 过滤器(filter) - 吕大豹
时间 2013-12-15 16:22:00 博客园-原创精华区 原文 http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器 ...
- angularjs金额大写过滤器
angularjs过滤器金额大写 html: 使用过虑器: <li> <i> <img src="images/red_star.png" alt=& ...
- [Angularjs]过滤器
写在前面 在实际项目中,经常会遇到这样的事情,返回的数据的格式,并不是我们希望的样子,这时候,你就需要对数据进行格式化了,还好,angularjs提供这样的过滤器,更方便我们的操作. 系列文章 [An ...
- AngularJS之Filter(二)
前言 本节我们来讲讲AngularJS中主要的部分之一,那就是过滤器,当从后台获取到的数据呈现到视图上时,此时可能需要对数据进行相应的转换,此时我们可以通过过滤器在不同页面进行不同数据的格式抓换,在A ...
- angularJs项目实战!04:angularjs的性能问题
上一篇文章中我花了很多口舌去介绍angularjs是一个中型框架,面对大型应用时少不了第三方类库的配合.而我的核心议题是:如何以angularjs的思路使用其他类库,这里jquery是最好的例子了,谁 ...
- 观《phonegap第三季 angularjs+ionic视频教程 实时发布》学习笔记(一)
一. phonegap 性能优化 以及 phonegap + Angularjs +ionic 1.安装包括:nodejs-cordova-ionic,sdk,phonegap等等: 2.怎样吧导航设 ...
- AngularJS 日期格式化
AngularJS 日期格式化 AngularJS的日期格式化有两种形式,一种是在HTML页面,一种是在JS代码里,都是用到AngularJS的过滤器$filter. HTML: date_expre ...
- 一款优秀的前端JS框架—AngularJS
前 言 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表 ...
- angularJS学习小结——filter
引言 filter过滤器对于我们来说并不陌生,他和我们现实生活中的过滤器的意思差不多,它的作用就是接收一个输 入的值,然后按照某个规则进行处理然后输出最后的结果,例如我们输入一个数字,然后我们需要得到 ...
最新文章
- 使用postMan测试erp系统登录接口
- Emm,qW3xT.2(矿机进程)
- 【Ubuntu入门到精通系列讲解】常用 Linux 命令的基本使用
- 窥探try ... catch与__try ... __except的区别
- 通过零知识证明,成为重要的区块链革新者
- jquery form 的beforeSubmit提交前的回调函数
- 滑动窗口最大值—leetcode239
- thincmf 分页无法搜索_thinkcmf5 后台搜索分页保持分页条件
- easyui怎样实现textarea
- eclipse下maven打包是出现如下错误com.sun.istack.internal不存在
- 计算机系统结构概念,计算机系统结构的基本概念
- matlab仿真实验过程,化工自动化实验及MATLAB仿真教程
- java 课程设计题目_Java课程设计题目有哪些?Java课程设计题目汇总
- 【LeetCode01】找到字符串中最长的回文字串
- Java实现第九届蓝桥杯分数
- t-SNE非线性降维
- xpwifi热点设置android,WinXP笔记本设置WiFi热点的方法
- 织梦dedeCMS留言薄
- 91m2中对DB进行了一次封装的DBHelpUtil工具类
- 爬虫总结(二)-- scrapy
热门文章
- 【Cisco技术资料汇总】
- Stanford机器学习---第五讲. 神经网络的学习 Neural Networks learning
- 《C语言接口与实现:创建可重用软件的技术》一1.5 习题
- MongoDB---之---可视化客户端
- [转]Java输入输出流的使用详细介绍
- swift -- Tuple 元组 Dictionary
- Android LayoutInflater原理分析,带你一步步深入了解View(一) 郭霖学习摘要
- 安装完补丁后是否需要服务器重新启动
- Spark性能调优-RDD算子调优篇
- 关于使用 Python 析构函数的正确姿势