AngularJS 笔记系列（五）过滤器 filter

过滤器是用来格式化给用户展示的数据的。
在 HTML 中的模板绑定符号{{}} 内通过|符号来调用过滤器。
- 大写：{{ name | uppercase }}

也可以在 JS 中进行调用$filter 服务。

app.controller('DemoController', ['$scope', '$filter',

       function($scope, $filter) {

         $scope.name = $filter('lowercase')('Ari');

     }]);

向过滤器传参：{{1234.5643445 | number：2 }}

常用的过滤器：

货币 {{123.5 | currency }}

date

{{ 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' }}  {{ today | date:'yy' }}  {{ today | date:'y' }}
月份 { today | date:'MMMM' }} {{ today | date:'MMM' }}  {{ today |date:'MM' }}{{ today |date:'M' }}

过滤器 filter

过滤器可以从给定数组中选择一个子集，然后作为一个新数组返回。
参数：

string

返回所有包含这个字符串的元素。参数前加！返回不包含该 string 的元素。

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}

     <!-- ["Lerner","Likes","Eat"] -->

object

将参数的属性和值与被过滤元素相应的属性进行比较，过滤出一致的元素。

{{ [{

         'name': 'Ari',

         'City': 'San Francisco',

         'favorite food': 'Pizza'

         },{

         'name': 'Nate',

         'City': 'San Francisco',

         'favorite food': 'indian food'

         }] | filter:{'favorite food': 'Pizza'} }}

<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

function

对所有元素执行这个函数，过滤出返回结果为非假值的元素。

json

将一个 JSON 或者 JS 对象转换成字符串；

{{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }}

<!-- {

 "name": "Ari",

 "City": "San Francisco"

}-->

limitTo
- 限制返回的数组或者字符串的长度；
orderBy
- 接受两个参数，第一个是必需的，第二个可选。第一个是排序条件，第二个是个布尔值，true 则按照排序条件逆序输出。

自定义过滤器

定义一个模块用来创建 filter 是比较好的方法。

 angular.module('myApp.filters', [])

     .filter('capitalize', function(input) {

         if (input) {

           return input[0].toUpperCase() + input.slice(1);

         }

     });

巴特西

AngularJS 笔记系列（五）过滤器 filter

最新文章

热门文章