AngularJS的filter过滤器

uppercase|lowercase:大小写转换过滤

json:json格式过滤

date:日期格式过滤

number:数字格式过滤

currency:货币格式过滤

filter:查找

limitTo:字符串对象截取

orderBy:对象排序

1、uppercase,lowercase 大小写转换

1.{{ "lower cap string" | uppercase }}   // 结果:LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }}      // 结果:tank is good
2.$filter('uppercase')()

2、date 格式化

1.{{ date_expression | date : format(可选)}}

2.$filter('date')(date, format)

format值

{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
'yyyy': 4位数字的年份(如AD 1 => 0001, AD 2010 => 2010) 
'yy': 2位数字的年份,范围为(00-99)。(如AD 2001 => 01, AD 2010 => 10) 
'y': 1位数字的年份,例如 (AD 1 => 1, AD 199 => 199)
'MMMM': 月份 (January-December)
'MMM': 月份 (Jan-Dec)
'MM': 月份, padded (01-12)
'M': 月份 (1-12) 
'dd': 日,范围为(01-31) 
'd': 日 (1-31)
'EEEE': 星期,(Sunday-Saturday)
'EEE': 星期, (Sun-Sat) 
'HH': 小时, 范围为(00-23)
'H': 小时 (0-23) 
'hh': am/pm形式的小时, 范围为(01-12)
'h': am/pm形式的小时, (1-12) 
'mm': 分钟,范围为 (00-59)
'm': 分钟 (0-59) 
'ss': 秒, 范围为 (00-59) 
's': 秒 (0-59) 
'.sss' or ',sss': 毫秒,范围为 (000-999) 
'a': am/pm 标记 
'Z': 4 位数字的时区偏移(+符号)(-1200-+1200) 
'ww': ISO-8601 年内的周数 (00-53)
'w': ISO-8601 年内的周数 (0-53)
AngularJS: API: ng/filter/date

 body, td {
 font-family: Tahoma;
 font-size: 10pt;
 }

format字符串也可以是以下预定义的本地化格式之一:
'medium': 等于en_US本地化后的'MMM d, y h:mm:ss a'(如:Sep 3, 2010 12:05:08 pm)
'short': 等于en_US本地化后的'M/d/yy h:mm a'(如: 9/3/10 12:05 pm) 
'fullDate': 等于en_US本地化后的'EEEE, MMMM d, y'(如: Friday, September 3, 2010) 
'longDate': 等于en_US本地化后的'MMMM d, y'(如: September 3, 2010) 
'mediumDate': 等于en_US本地化后的'MMM d, y'(如: Sep 3, 2010) 
'shortDate': 等于en_US本地化后的'M/d/yy'(如: 9/3/10) 
'mediumTime': 等于en_US本地化后的'h:mm:ss a'(如: 12:05:08 pm) 
'shortTime': 等于en_US本地化后的'h:mm a'(如: 12:05 pm)

format字符串可以包含固定值。这需要用单引号括起来 (如:"h 'in the morning'")
如果要输出单引号,使序列中使用两个单引号(如:"h 'o''clock'")。

3 数字格式过滤

1.{{ number_expression | number : fractionSize}}

2.$filter('number')(number, fractionSize)

{{158620 | number}}//158,620
{{16.1945000 | number:2}} //16.19

4.currency货币格式化

1.{{ currency_expression | currency : symbol}}

2.$filter('currency')(amount, symbol)

{{ 250 | currency }}            // 结果:$250.00
{{ 250 | currency:"RMB ¥ " }}  // 结果:RMB ¥ 250.00

5.json格式过滤

1.{{ json_expression | json}}

2.$filter('json')(Object)

这个过滤器常用于调试。使用双花括号的绑定会自动转换成JSON。

6.limitTo:字符串对象截取

1.{{ limitTo_expression | limitTo : limit}}

2.$filter('limitTo')(input, limit)

返回的数组或字符串的长度。如果limit数字为正数,从源数组/字符串开始的limit数量的条目会被复制。如果数字为负数,从源数组/字符串结尾的limit 数量的条目会被复制。如果limit超过array.length会被裁剪。长度为limit的新子数组或子串,如果输入数组小于limit,返回长度会小于limit。


<body ng-app="limitToExample">
        
    
    <div ng-controller="ExampleController">
        
  Limit {{numbers}} to: <input Type="integer" ng-model="numLimit">
  <p>Output numbers: {{ numbers | limitTo:numLimit }}</p>
  Limit {{letters}} to: <input Type="integer" ng-model="letterLimit">
  
  <p>Output letters: {{ letters | limitTo:letterLimit }}</p></div>
  
    <script> 
        angular.module('limitToExample', [])
    .controller('ExampleController', ['$scope', function($scope) 
    {
      $scope.numbers = [1,2,3,4,5,6,7,8,9];  
      $scope.letters = "abcdefghi";
      $scope.numLimit = 3;     
      $scope.letterLimit = -3;  
    }]
    );
    </script>
</body>

6.orderBy:对象排序

通过expression来排序指定的array 。 字符串按字母顺序排序,数字按大小排序。注意:如果你发现数字没被正确排序,请确认它们保存的是数字而不是字符串。

1.{{ orderBy_expression | orderBy : expression : reverse}}

2.$filter('orderBy')(array, expression, reverse)

Array 用于排序的数组。
expression :可为下列之一:
function(*)
Function: Getter函数。这个函数的结果可使用<,=,>操作符进行排序。
string: 一个Angular表达式,对一个对象求值来排序,如用'name'来对属性名为'name'序。用可选前缀+或-来确定是正序或倒序 (例如,+name or -name)。
Array.<(function()|string)>
一个函数或字符串声明数组。数组中的第一个声明用于排序,但是当两个条目相等时,会用下一个声明。
reverse(可选)boolean对数组进行反向排序。

<script>  angular.module('orderByExample', [])
    .controller('ExampleController', ['$scope', Function($scope) {
      $scope.friends = [
 {name:'John', phone:'555-1212', age:10},
 {name:'Mary', phone:'555-9876', age:19},
 {name:'Mike', phone:'555-4321', age:21},
 {name:'Adam', phone:'555-5678', age:35},
 {name:'Julie', phone:'555-8765', age:29}];
      $scope.predicate = '-age';    }
]);
</script>
<div ng-controller="ExampleController">
  <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>  <hr/>
  [ <a href="" ng-click="predicate=''">unsorted</a> ] 
 <table class="friend">
    <tr><th><a href="" ng-click="predicate = 'name'; reverse=false">名称</a>
          (<a href="" ng-click="predicate = '-name'; reverse=false">^</a>)</th>
      <th><a href="" ng-click="predicate = 'phone'; reverse=!reverse">Phone Number</a></th>
      <th><a href="" ng-click="predicate = 'age'; reverse=!reverse">Age</a></th>
    </tr><tr ng-repeat="friend in friends | orderBy:predicate:reverse">
    <td>{{friend.name}}</td>  
    <td>{{friend.phone}}</td>
    <td>{{friend.age}}</td>  
   </tr> 
 </table>
</div>

7.filter:查找

从array中选择一个条目子集,并作为一个新数组返回。

1.{{ filter_expression | filter : expression : comparator}}

2.$filter('filter')(array, expression, comparator)

array 源数组。

expression

string:作为表达式计算的字符串,计算结果作为子串匹配array中的内容。array中包含这个字符串的所有字符串或字符串属性对象会返回。字符串前可以放置!表示相反条件。
Object:一个模式对象,用于过滤array中对象的指定属性。例如{name:"M", phone:"1"} 表示返回数据组中属性name 包含 "M" 和属性 phone 包含 "1"的条目。可以使用特殊属性名 $ (as in {$:"text"}) 来匹配对象中的所有属性。这相当于上面描述的使用string进行的子串简单匹配。
function() Function(value): 一个自定义过滤方法的函数。这个函数被每个array中的元素调用。最终结果为返回true的元素的数组。

comparator

用于检测期望值(来自过滤表达式)和实际值(来自数组中的实际对象)是否匹配的比较器。可以为以下之一:
Function(actual, expected): 这个函数会传入对象值和期望值来比较,如果条目返回true就会被包含在过滤结果中。

true: Function(actual, expected) { return angular.equals(expected, actual)}的便捷写法。它对期望值和实际值进行强比较。

false|undefined: 一个不区分大小写的子串匹配函数的便捷写法。

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

推荐阅读更多精彩内容

  • 转载文章 angularjs 过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回...
    飞将军阅读 595评论 0 2
  • 查找当前页的url Filter是用来格式化数据用的。 Filter的基本原型( '|' 类似于Linux中的管道...
    laiyituan阅读 4,576评论 0 2
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,588评论 0 3
  • angular中filter过滤器主要有两个作用:格式化数据和过滤数据。filter组件共有以下几种:1、curr...
    小弋呀阅读 672评论 0 4
  • 初中学生或者家长,都需要考虑中考的问题,你可能会想知道自己目前成绩能上什么高中。 我们知道上什么高中取决于当年高中...
    名校榜阅读 1,526评论 0 1