过滤器filter

angular中filter过滤器主要有两个作用:格式化数据过滤数据。filter组件共有以下几种:1、currency 2、number 3、date 4、json 5、lowercase 6、uppercase 7、limitTo 8、orderBy 9、filter。
官方API:https://code.angularjs.org/1.4.0-rc.2/docs/api/ng/filter

一 、currency

{{ currency_expression | currency : symbol : fractionSize}} 
 currency的作用是将值转换为精确小数点的数字,同时在前面添加货币符号,如果值不能转化为数字,会返回空字符
 symbol:货币符号,  
 fractionSize:精确小数位数
  $scope.money = 126893.5564;

currency测试

图中我们可以看到currency默认添加$符号,精确2位小数,会给数字添加逗号

二、number

currency已经包含了number的功能了,同样如果值不能转换为数字,返回空,如果是无穷大返回“∞”
  {{ number_expression | number : fractionSize}}
  fractionSize:小数点位数

number测试

我们可以看到,number默认精确了3位小数
currency和number精确小数时都会发生四舍五入

三、date

关于date的格式化一看官方API简直吓死人,真是太多了,我们就来关注一下我们会用到的,想了解更多的自己可以去看看文档。

  1. yyyy:表示年份,如2016
  2. MM:表示月份,如06
  3. M:同样表示月份,如6,和MM的区别是个位数月份时前面没有0,其他类似
  4. dd/d:表示天,如今天是06
  5. HH/H:表示小时,24小时制
  6. hh/h:同样表示小时,12小时制
  7. mm/m:分钟
  8. ss/s:秒
  9. sss:毫秒
  10. a :表示AM/PM,没有它的话12小时制时我们怎么知道上午还是下午啊,当然24小时制时仍然可以用它
    $scope.today = new Date();
date

我们可以看到年、月、日、时间的顺序是可以自行调的,连接符也是。之前犯二不解为什么有的是大写字母有的是小写字母,那是因为默认是小写的,但是月份M和分钟m冲突,所以才有大小写混合了。。

四、uppercase、lowercase

这两个确实没什么好说的
$scope.str = 'Hello AngularJs';

大小写转换

五、limitTo

{{ limitTo_expression | limitTo : limit : begin}}
limit:截取长度
begin:开始位置
limitTo的作用类似于string的substr函数,只不过参数颠倒了,注意是substr不是substring,
limitTo不仅可以用于字符串,也可以用于数组,此处仅以字符串举例

limitTo
六、orderBy

{{ orderBy_expression | orderBy : expression : reverse}}
orderBy的作用是按照某一规则给数组进行排序,可以是普通数组,也可以是对象数组
$scope.items = [{id: 1001, name: '赵云', country: '蜀'}, {id: 1003, name: '关羽', country: '蜀'}, {id: 1002,name: '马超',country: '蜀'}];

orderBy按照对象id排序

从例子2中我们可以看到,orderBy默认按照对象id进行了升序排序,例子3“-id”即按照id进行了降序排序,而例子4可以看出reverse为true的作用是反转排序结果,JavaScript中也有reverse函数。
普通数组也是可以的{{[22,34,12,3,56]|orderBy:'':true}}

普通数组排序
七、filter

终于到最后一个了,写完就可以回家吃饭了。
看名字就知道filter是过滤作用啦~~还是直接举例子吧

filter过滤

我们看到:

  1. 例子1中直接filter:"00"匹配到了所有数据,那是因为filter进行的是模糊匹配,只要有一个属性值含有”00“就会匹配到
  2. 例子2中用filter:{id:'1001'},不出我们所料这次只匹配到了id为1001的数据,其实这里仍然是模糊匹配,如果我们把“1001”改成“001”你试试是不是仍会匹配到
  3. 忘记告诉item是啥了
    $scope.item={}; $scope.item.id='001';
    我们用了item.id和item.$进行了匹配,这其实是一种更加灵活的方式,下一节中我们会用到。
八、In JavaScript

我们上面讲的一些都是在html中使用过滤器,其实在JavaScript中也可以。
myApp.controller('filterCtr', ['$scope', '$filter', function ($scope, $filter) {}
我们要先注入$filter,然后我们再讲一个新的过滤器-json
官方说json过滤器的作用就是为了调试用的,也是,要不然谁没事把一个json字符串输出到页面干嘛。
我们来看一下它的效果:

json过滤器

是不是看起来方便多了。
类似的其他过滤器也能在函数里面用:
$scope.test = $filter('currency')(142, 'CNY', 5);
其他类似,可以看看文档,试一下。
而且filter过滤器还能自定义过滤函数,功能会更加强大,类似于ECMAScript5中的filter函数,快去看看。

总结

肚子好饿,我要吃饭去了
  github代码地址

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

推荐阅读更多精彩内容