安详严整AngularJS过滤器的运用_AngularJS_脚本之家

AnularJS的过滤器用来格式化需求体现给客户的多少,有比超多实用的内置过滤器,也得以团结编写。

在HTML中的模板绑定符号{{
}}内经过|符号来调用过滤器。举例,要是大家愿意将字符串调换来大写,能够对字符串中的每一个字符都单身开展转移操作,也足以利用过滤器:

{{ name | uppercase
}}
在JavaScript代码中得以经过$filter来调用过滤器。举个例子,在JavaScript代码中动用lowercase过滤器:

app.controller('DemoController', ['$scope', '$filter',function {$scope.name = $filter;}]);

以HTML的款型利用过滤器时,若是供给传递参数给过滤器,只要在过滤器名字背后加冒号就可以。借使有多少个参数,能够在各样参数前面都步入冒号。举个例子,数值过滤器能够界定小数点后的位数,在过滤器后写上:2能够将2作为参数传给过滤器:

{{ 123.456789 | number:2 }}

1. currencycurrecy过滤器能够将二个数值格式化为货币格式。用{{ 123 |
currency
}}来将123转形成货币格式。currecy过滤器允许大家协调安装货币符号。默许景况下会动用客商端所处区域的货币符号,不过也能够自定义货币符号。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’
}} 日子格式化数字日期:{{ today|date:’dd’ }} 三个月首的第几天:{{
today | date:’d’ }} Ukraine语星期:{{ 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

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

也能够用自定义函数实行过滤:

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

isCapitalized函数的法力是依赖首字母是不是为大写再次来到true或false,具体如下所示:

$scope.isCapitalized = function {return str[0] == str[0].toUpperCase();};

自定义过滤器

首先,创制三个模块用以在行使中开展引用

angular.module.filter('capitalize', function() {return function {// input是我们传入的字符串if  {return input[0].toUpperCase;}});

这几天,借使想将贰个句子的首字母转变到大写格局,能够用过滤器先将全体句子都转变成小写,再把首字母调换来大写:

{{ 'ginger loves dog treats' | lowercase | capitalize }}

如上正是AngularJS过滤器的行使办法,希望对我们的学习抱有利于。

发表评论

电子邮件地址不会被公开。 必填项已用*标注