filter.js剖析

Ionic过滤器集成使用了Angularjs filter过滤器：
过滤器这块分两种来介绍，包括有内置的过滤器和自定义过滤器。

1、内置的global过滤器

1.1）定义：

内置过滤器定义在项目www/lib/ionic/js/angular/angular.js

1.1.1）、filter模块注入：

filter: invokeLaterAndSetModuleName(‘$filterProvider’, ‘register’)

1.2.1）、内置filter种类与注册：

register(‘currency’, currencyFilter);
register(‘date’, dateFilter);
register(‘filter’, filterFilter);
register(‘json’, jsonFilter);
register(‘limitTo’, limitToFilter);
register(‘lowercase’, lowercaseFilter);
register(‘number’, numberFilter);
register(‘orderBy’, orderByFilter);
register(‘uppercase’, uppercaseFilter);

1.2）、用法（分别可以在html和js中使用，主要以html举例）：

1.2.1）、currency 数字格式化为货币

使用： {{100 | currency:”RMB ￥ ” }}
结果：RMB ￥ 100.00

1.2.2）、date 时间格式化

使用：{{ 144921017328 date:”yyyy-MM-dd hh:mm:ss” }}
结果：2015-12-04 14:22:53

1.2.3）、filter 查询过滤

使用：{{ [{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′}
] | filter:{‘name’:’Mary’} }}
结果:[{name:’Mary’, phone:’800-BIG-MARY’}]

1.2.4）、json格式化

{{ {basketball: “Jordan”} | json }} //结果：{ “basketball”: “Jordan” }

1.2.5）、limitTo 字符串，数组，数字的截取

使用：{{ “ioniconline” | limitTo:5 }}
结果：ionic

1.2.6）、lowercase 全转成小写字母

使用:{{ “IONICONLINE” | lowercase }}
结果：ioniconline

1.2.7）、number 数字格式化

使用：{{ 1.234 | number:2 }}
结果：1.23

1.2.8）、orderBy 排序

使用：{{ [{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}] | orderBy:’age’:false}} //false：升序排

结果：[{name:’John’, phone:’555-1212′, age:10},
{name:’Mary’, phone:’555-9876′, age:19},
{name:’Mike’, phone:’555-4321′, age:21},
{name:’Julie’, phone:’555-8765′, age:29},
{name:’Adam’, phone:’555-5678′, age:35}]

1.2.9）、uppercase 全转成大写字母

使用:{{ “ioniconline” | uppercase }}
结果：IONICONLINE

Note：controller（后续文章将会详解）中也可以使用 filter

$scope.websiteName= $filter(‘uppercase’)(‘ioniconline’);

详细参考：

http://docs.angularjs.cn/api/ng/filter/

2）、自定义filter过滤器（带html标签的内容过滤为例）

2.1）、filters.js这个module中添加一个filter。

语法：.filter(‘name’, function() { });
实例：
angular.module(‘starter.filters’, [‘ionic’])
.filter(‘trust_as_html’, [‘$sce’, function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}]);

2.2）、载入

根据前面文章介绍，app.js中会依赖注入加载filter这个module
angular.module(‘starter’, [‘ionic’, ‘starter.controllers’, ‘starter.filters’, ‘starter.routes’, ‘starter.services’, ‘starter.directives’])。

2.3）、在template中使用filter

使用方法：通过管道命令调用；
实例：<p ng-bind-html=”info.desp | filter:trust_as_html”></p>
Note：| lowercase |trust_as_html管道命令可以有多个。