Cordova webapp实战开发(七)- AngularJS 过滤器

1、 currency###

currecy过滤器可以将一个数值格式化为货币格式, {{ 123 | currecy }} 将123转化成货币格式

2、 date###

date过滤器能将日期格式化成需要的格式, 默认采用mediumDate格式

{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ today | date:'short' }} <!-- 8/9/1312:09PM -->
{{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->
{{ today | date:'longDate' }} <!-- August 09, 2013 -->
{{ today | date:'mediumDate' }}<!-- Aug 09, 2013 -->
{{ today | date:'shortDate' }} <!-- 8/9/13 -->
{{ today | date:'mediumTime' }}<!-- 12:09:02 PM -->
{{ today | date:'shortTime' }} <!-- 12:09 PM -->
// 年份
{{ today | date:'yyyy' }} <!-- 2013 -->
{{ today | date:'yy' }} <!-- 13 -->
{{ today | date:'y' }} <!-- 2013 -->

// 月份
{{ today | date:'MMMM' }} <!-- 英文月份 -->
{{ today | date:'MMM' }} <!-- 英文月份简写 -->
{{ today | date:'MM' }} <!-- 数字月份 -->
{{ today | date:'M' }} <!-- 一年中第几个月份 -->

// 日
{{ today | date:'dd' }} <!-- 数字日期 -->
{{ today | date:'d' }} <!-- 一月中第几个月份  -->
{{ today | date:'EEEE' }} <!-- 英文星期 -->
{{ today | date:'EEE' }} <!-- 英文星期简写 -->

// 小时
{{today | date:'HH'}} <!--24小时制数字小时-->
{{today | date:'H'}} <!--一天中的第几个小时-->
{{today | date:'hh'}} <!--12小时制数字小时-->
{{today | date:'h'}} <!--上午或者下午的第几个小时-->

// 分钟
{{ today | date:'mm' }} <!-- 数字分钟 -->
{{ today | date:'m' }} <!-- 一个小时中的第几分钟 -->

// 秒数
{{ today | date:'ss' }} <!-- 数字秒数 -->
{{ today | date:'s' }} <!-- 一分钟内第几秒 -->
{{ today | date:'.sss' }} <!-- 毫秒 -->

// 字符
{{ today | date:'a' }} <!-- AM -->
{{ today | date:'Z' }} <!--- 0700 -->

//自定义
{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 -->
{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8-->
{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->

3、 filter###

filter过滤器可以从给定的数组中选择一个子集,并将其生成一个新数组返回,
filter第一个参数,可以是字符串,对象,或者函数

字符串 :
返回所有包含这个字符串的元素。如果我们想返回不包含该字符串的元素,在参数前加!符号

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter : 'e' }}
结果 <!-- ["Lerner","Likes","Eat"] -->

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter : '!e' }}
结果 <!-- ["Ari","To","Pizza"] -->

对象 :
AngularJS会将待过滤对象的属性同这个对象中的同名属性进行比较,如果属性值是字符串,就会判断是否包含该字符串。
例如 :有一个由people对象组成的数组

{{ [{
'name': 'Ari',
'City': 'San Francisco',
'favorite food': 'Pizza'
},{
'name': 'Nate',
'City': 'San Francisco',
'favorite food': 'indian food'
}] | filter:{'favorite food': 'Pizza'} }}
// 将favorite food 为Pizza的过滤出来
结果 : <!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

函数 :
对每个元素都执行这个函数, 返回非假值的元素会出现在新的数组中并返回。
例如 :

// 每一个元素都会执行,isCapitalized函数
{{ ['Ari','likes','to','travel'] | filter:isCapitalized }}
<!-- ["Ari"] -->

$scope.isCapitalized = function(str) { 
      // toUpperCase()是转换成大写
      // 判断首之母是否大写并返回true,flase
      return str[0] == str[0].toUpperCase();
};

4、 json###

json过滤器可以将一个JSON或JavaScript对象转换成字符串

{{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }}
<!--{
 "name": "Ari",
 "City": "San Francisco"}
-->

5、 limitTo###

limitTo过滤器会根据传入的参数生成一个新的数组或字符串,新的数组或字符串的长度取决于传入参数。

{{ San Francisco is very cloudy | limitTo:-2 }}
<!-- dy -->

{{ ['a','b','c','d','e','f'] | limitTo:2 }}
<!-- ["a", "b"] -->

6、 lowercase###

lowercase过滤器将字符串转为小写

{{ "AAA BBB CCC" | lowercase }}
<!-- aaa bbb ccc -->

7、 number###

number过滤器将数字格式化成文本,第二个参数可以截取小数点位数

{{ 1.234567 | number:1 }}
<!-- 1.2 -->

8、 orderBy###

orderBy过滤器可以用表达式对指定的数组进行排序,orderBy有两个参数
第一个参数是用来确定数组排序方向的谓词
第二个参数BOOL类型, 用来控制排序的方向 (是否逆向)

9、uppercase###

uppercase过滤器将字符串转为大写

{{ " aaa bbb ccc " | lowercase }}
<!--AAA BBB CCC-->

10、 自定义过滤器###

例如我们要创建一个自定义过滤器,将传入的字符窜第三个字符变成大写

首先,创建一个模块用以在应用中进行引用

angular.module('myApp.filters', [])
// 定义一个名字为 capitalize 过滤器
.filter('capitalize', function() {
    return function(input) { 
        return input[0].toUpperCase() + input.slice(3);
    }
});

现在,先将句子全部转换成小写,再执行了capitalize过滤器

{{ 'Ginger Loves Dog Treats' | lowercase | capitalize }}
结果 : <!-- giNger loves dog treats -->

11、 表单过滤器###

// novalidate 属性规定当提交表单时不对其进行验证(不用浏览器对表单的默认验证行为)
<form name="form" novalidate>
    <label name="email">Your email</label>
    <input type="email" name="email" ng-model="email" placeholder="Email Address" />
</form>

// 1. 加上required代表必填项
<input type="text" required />

// 2.验证表单输入文本长度是否大于某个最小值,这里的意思是最小输入5个字符
<input type="text" ng-minlength="5" />

// 3.验证表单输入文本长度是否大于某个最大值,这里的意思是最多输入5个字符
<input type="text" ng-maxlength="5" />

// 4. 匹配相应的正则表达式
<input type="text" ng-pattern="[a-zA-Z]" />

// 5. 邮件类型
<input type="email" name="email" ng-model="user.email" />

// 6. 数字
<input type="number" name="number"  />

// 7. URL
<input type="url" name="url"  />
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345

推荐阅读更多精彩内容

  • 转载文章 angularjs 过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回...
    飞将军阅读 596评论 0 2
  • 过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器,同时也提供了方便的途径可以自己创建...
    oWSQo阅读 1,085评论 0 5
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,212评论 0 4
  • 仅做分析,不作为荐股的参考,请务必注意! 公司简介 福耀玻璃成立于1987年,总部设在福建福清。公司是中国最大、世...
    bluescorpio阅读 828评论 0 1
  • 技能的意义是建立在这样的关系上的:相对于增加个人利益,要更重视向客户交付价值。罗胖曰:我们来翻译一下作者讲的道理—...
    过河卒阅读 272评论 0 2