0

0

angularjs过滤器怎么使用?angularjs过滤器使用方法介绍

寻∝梦

寻∝梦

发布时间:2018-09-06 15:49:50

|

2031人浏览过

|

来源于php中文网

原创

本篇文章主要的讲述了关于angularjs过滤器的使用方法的纤细解释,里面还有更多的angularjs过滤器的格式化样式。接下来就让我们一起来爱看这篇文章吧。

我们先来谈谈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.456789 | number:2 }}

1.currency

currecy过滤器可以将一个数值格式化为货币格式。用{{ 123 | currency }}来将123转化

成货币格式。

currecy过滤器允许我们自己设置货币符号。默认情况下会采用客户端所处区域的货币符号,

但是也可以自定义货币符号。(想看更多就到PHP中文网的AngularJS学习手册栏目)

2.date

date过滤器可以将日期格式化成需要的格式。AngularJS中内置了几种日期格式,如果没有

指定使用任何格式,默认会采用mediumDate格式,下面的例子中展示了这个格式。

下面是内置的支持本地化的日期格式:

  • {{ today | date:'medium' }}

  • {{ today | date:'short' }}

  • {{ today | date:'fullDate' }}

  • {{ today | date:'longDate' }}

  • {{ today | date:'mediumDate' }}

  • {{ today | date:'shortDate' }}

  • {{ today | date:'mediumTime' }}

  • {{ today | date:'shortTime' }}

年份格式化

四位年份:{{ today | date:'yyyy' }}

两位年份:{{ today | date:'yy' }}

一位年份:{{ today | date:'y' }}

月份格式化

英文月份:{{ today | date:'MMMM' }}

英文月份简写:{{ today | date:'MMM' }}

数字月份:{{ today |date:'MM' }}

一年中的第几个月份:{{ today |date:'M' }}

站长俱乐部购物系统
站长俱乐部购物系统

功能介绍:1、模块化的程序设计,使得前台页面设计与程序设计几乎完全分离。在前台页面采用过程调用方法。在修改页面设计时只需要在相应位置调用设计好的过程就可以了。另外,这些过程还提供了不同的调用参数,以实现不同的效果;2、阅读等级功能,可以加密产品,进行收费管理;3、可以完全可视化编辑文章内容,所见即所得;4、无组件上传文件,服务器无需安装任何上传组件,无需支持FSO,即可上传文件。可限制文件上传的类

下载

日期格式化

数字日期:{{ today|date:'dd' }}

一个月中的第几天:{{ today | date:'d' }}

英文星期:{{ today | date:'EEEE' }}

英文星期简写:{{ today | date:'EEE' }}

小时格式化

24小时制数字小时:{{today|date:'HH'}}

一天中的第几个小时:{{today|date:'H'}}

12小时制数字小时:{{today|date:'hh'}}

上午或下午的第几个小时:{{today|date:'h'}}

分钟格式化

数字分钟数:{{ today | date:'mm' }}

一个小时中的第几分钟:{{ today | date:'m' }}

秒数格式化

数字秒数:{{ today | date:'ss' }}

一分钟内的第几秒:{{ today | date:'s' }}

毫秒数:{{ today | date:'.sss' }}

下面是一些自定义日期格式的示例:

{{ today | date:'MMMd, y' }} 
{{ today | date:'EEEE, d, M' }} 
{{ today | date:'hh:mm:ss.sss' }} 

filter过滤器可以从给定数组中选择一个子集,并将其生成一个新数组返回。

例如,用下面的过滤器可以选择所有包含字母e的单词:

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}

如果要过滤对象,可以使用上面提到的对象过滤器。例如,如果有一个由people对象组成的

数组,每个对象都含有他们最喜欢吃的食物的列表,那么可以用下面的形式进行过滤:

{{ [{
'name': 'Ari',
'City': 'San Francisco',
'favorite food': 'Pizza'
},{
'name': 'Nate',
'City': 'San Francisco',
'favorite food': 'indian food'
}] | filter:{'favorite food': 'Pizza'} }}

也可以用自定义函数进行过滤(在这个例子中函数定义在$scope上):

{{ ['Ari','likes','to','travel'] | filter:isCapitalized }}

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' | lowercase | capitalize }}

以上就是AngularJS过滤器的使用方法(想看更多就到PHP中文网,AngularJS使用手册栏目学习),有问题的可以在下方提问。

【小编推荐】

angularjs如何搭建开发环境?angularjs搭建开发环境的过程分析

angularjs怎么开发web应用?angularjs开发web应用实例

相关专题

更多
c++主流开发框架汇总
c++主流开发框架汇总

本专题整合了c++开发框架推荐,阅读专题下面的文章了解更多详细内容。

79

2026.01.09

c++框架学习教程汇总
c++框架学习教程汇总

本专题整合了c++框架学习教程汇总,阅读专题下面的文章了解更多详细内容。

46

2026.01.09

学python好用的网站推荐
学python好用的网站推荐

本专题整合了python学习教程汇总,阅读专题下面的文章了解更多详细内容。

121

2026.01.09

学python网站汇总
学python网站汇总

本专题整合了学python网站汇总,阅读专题下面的文章了解更多详细内容。

12

2026.01.09

python学习网站
python学习网站

本专题整合了python学习相关推荐汇总,阅读专题下面的文章了解更多详细内容。

15

2026.01.09

俄罗斯手机浏览器地址汇总
俄罗斯手机浏览器地址汇总

汇总俄罗斯Yandex手机浏览器官方网址入口,涵盖国际版与俄语版,适配移动端访问,一键直达搜索、地图、新闻等核心服务。

71

2026.01.09

漫蛙稳定版地址大全
漫蛙稳定版地址大全

漫蛙稳定版地址大全汇总最新可用入口,包含漫蛙manwa漫画防走失官网链接,确保用户随时畅读海量正版漫画资源,建议收藏备用,避免因域名变动无法访问。

370

2026.01.09

php学习网站大全
php学习网站大全

精选多个优质PHP入门学习网站,涵盖教程、实战与文档,适合零基础到进阶开发者,助你高效掌握PHP编程。

45

2026.01.09

php网站搭建教程大全
php网站搭建教程大全

本合集专为零基础用户打造,涵盖PHP网站搭建全流程,从环境配置到实战开发,免费、易懂、系统化,助你快速入门建站!

12

2026.01.09

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
AngularJS教程
AngularJS教程

共24课时 | 2.5万人学习

Java 教程
Java 教程

共578课时 | 44.9万人学习

【web前端】Node.js快速入门
【web前端】Node.js快速入门

共16课时 | 2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号