0

0

浅析AngularJS Filter用法_AngularJS

php中文网

php中文网

发布时间:2016-05-16 15:23:11

|

1410人浏览过

|

来源于php中文网

原创

系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧

Filter简介

Filter是用来格式化数据用的。

Filter的基本原型( ‘|' 类似于Linux中的管道模式):

复制代码 代码如下:

{{ expression | filter }}

Filter可以被链式使用(即连续使用多个filter):

复制代码 代码如下:

{{ expression | filter1 | filter2 | ... }}

Filter也可以指定多个参数:

复制代码 代码如下:

{{ expression | filter:argument1:argument2:... }}

AngularJS内建的Filter

AngularJS内建了一些常用的Filter,我们一一来看一下。

currencyFilter(currency):

用途:格式化货币

方法原型:

复制代码 代码如下:

function(amount, currencySymbol, fractionSize)

用法:

 {{  | currency}} 
 {{ . | currency:'¥'}}
 {{ . | currency:'CHY¥':}}
 {{ . | currency:undefined:0}}

dateFilter(date):

用途:格式化日期

方法原型:

复制代码 代码如下:

function(date, format, timezone)

用法:


{{ '2015-05-20T03:56:16.887Z' | date:"MM/dd/yyyy @ h:mma"}}

{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma"}}

{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma":"UTC"}}

filterFilter(filter):

用途:过滤数组

方法原型:

复制代码 代码如下:

function(array, expression, comparator)

用法1(参数expression使用String):

 

Name:{{u.name}}

invideo AI
invideo AI

InVideo 使用现成的模板简化视频创建

下载

Age:{{u.age}}


用法2(参数expression使用function):

 // 先在Controller中定义function: myFilter
 $scope.myFilter = function (item) {
   return item.age === ;
 };
 

Name:{{u.name}}

Age:{{u.age}}


用法3(参数expression使用object):

 

Name:{{u.name}}

Age:{{u.age}}


用法4(指定comparator为true或false):

 
Name:

Name:{{u.name}}

Age:{{u.age}}


用法5(指定comparator为function):

// 先在Controller中定义function:myComparator, 此function将能匹配大小写不敏感的内容,但与comparator为false的情况不同的是,comparator必须匹配全文
 $scope.myComparator = function (expected, actual) {
   return angular.equals(expected.toLowerCase(), actual.toLowerCase());
 }
 
Name:

Name:{{u.name}}

Age:{{u.age}}


jsonFilter(json):

方法原型:

复制代码 代码如下:

function(object, spacing)

用法(将对象格式化成标准的JSON格式):

复制代码 代码如下:

{{ {name:'Jack', age: 21} | json}}

limitToFilter(limitTo):

方法原型:

复制代码 代码如下:

function(input, limit)

用法(选取前N个记录):

 

Name:{{u.name}}

Age:{{u.age}}

lowercaseFilter(lowercase)/uppercaseFilter(uppercase):

方法原型:

复制代码 代码如下:

function(string)

用法:

China has joined the {{ "wto" | uppercase }}.
We all need {{ "MONEY" | lowercase }}.

numberFilter(number):

方法原型:

复制代码 代码如下:

function(number, fractionSize)

用法:

{{ "3456789" | number}}

{{ true | number}}
{{ 12345678 | number:1}}

orderByFilter(orderBy):

方法原型:

复制代码 代码如下:

function(array, sortPredicate, reverseOrder)

用法:

 

Name:{{u.name}}

Deposit:{{u.deposit}}

Age:{{u.age}}


自定义Filter

和Directive一样,如果内建的Filter不能满足你的需求,你当然可以定义一个专属于你自己的Filter。我们来做一个自己的Filter:capitalize_as_you_want,该Filter会使你输入的字符串中的首字母、指定index位置字母以及指定的字母全部大写。

方法原型:

复制代码 代码如下:

function (input, capitalize_index, specified_char)

完整的示例代码:


 
 
   
   
 
 
   
   
Result: {{ yourinput | capitalize_as_you_want::'b' }}

好了,本篇讲了AngularJS中的Filter,看完这篇后,我们可以利用好Filter非常方便的使数据能按我们的要求进行展示,从而使页面变得更生动。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
走进 ES6 新标准语法
走进 ES6 新标准语法

共15课时 | 1.6万人学习

Angular js入门篇
Angular js入门篇

共17课时 | 3.5万人学习

ReactJS基础视频教程
ReactJS基础视频教程

共14课时 | 2.7万人学习

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

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