博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJS的Filter用法详解
阅读量:6610 次
发布时间:2019-06-24

本文共 3200 字,大约阅读时间需要 10 分钟。

原文地址:

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)

用法:

1 {
{ 12 | currency}}
2 3 { { 12.45 | currency:'¥'}}
4 5 { { 12.45 | currency:'CHY¥':1}}
6 7 { { 12.55 | 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}}

Age:{

{u.age}}

 

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

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

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:3:'b' }}

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

转载于:https://www.cnblogs.com/gongshunkai/p/6752665.html

你可能感兴趣的文章
Webstrom快捷键大全
查看>>
python 基础 1.5 python数据类型(三)--元组常用方法示例
查看>>
HTML笔记06--浮动第一章
查看>>
使用Perl5获取有道词典释义
查看>>
Python开发环境搭建for Windows
查看>>
CentOS 7安装与配置Tomcat8
查看>>
Bootstrap两端对齐的导航实例
查看>>
POJ 3250 Bad Hair Day
查看>>
jpa的分页实现
查看>>
请定义一个交通工具(Vehicle)的类,其中有: 属性:速度(speed),体积(size)等等
查看>>
垃圾收集器与内存分配策略(一)
查看>>
20175311 2018-2019-2 《Java程序设计》第四周学习总结
查看>>
腾讯云CVM之间配置免密钥登录
查看>>
HTML元素1: 基本元素,标题,段落,链接,图像等
查看>>
MyBatis原理
查看>>
599. Minimum Index Sum of Two Lists(easy)
查看>>
文件的打开和关闭
查看>>
css_文本溢出
查看>>
BOM,Dom 回顾
查看>>
TFS简介
查看>>