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}}

Shakespeare
Shakespeare

一款人工智能文案软件,能够创建几乎任何类型的文案。

下载

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非常方便的使数据能按我们的要求进行展示,从而使页面变得更生动。

相关专题

更多
PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

23

2026.01.19

java用途介绍
java用途介绍

本专题整合了java用途功能相关介绍,阅读专题下面的文章了解更多详细内容。

11

2026.01.19

java输出数组相关教程
java输出数组相关教程

本专题整合了java输出数组相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.19

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.19

xml格式相关教程
xml格式相关教程

本专题整合了xml格式相关教程汇总,阅读专题下面的文章了解更多详细内容。

4

2026.01.19

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

13

2026.01.19

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

93

2026.01.18

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

112

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

155

2026.01.16

热门下载

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

精品课程

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

共15课时 | 1.5万人学习

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号