AngularJS 过滤器
1. 在模板中使用filter
我们可以直接在{{}}中使用filter,跟在表达式后面用 | 分割,语法如下:
{{ expression | filter }}
也可以多个filter连用,上一个filter的输出将作为下一个filter的输入(怪不得这货长的跟管道一个样。。)
{{ expression | filter1 | filter2 | ... }}
filter可以接收参数,参数用 : 进行分割,如下:
{{ expression | filter:argument1:argument2:... }}
除了对{{}}中的数据进行格式化,我们还可以在指令中使用filter,例如先对数组array进行过滤处理,然后再循环输出:
<span ng-repeat="a in array | filter "></span>
代码和html结果样式如下:
<table class="table table-bordered">
<tr><td>过滤器</td><td>功能</td><td>原始数据</td><td>过滤后的数据</td></tr>
<tr><td>uppercase</td><td>大小写转换</td><td>dream</td><td>{{ "dream" | uppercase }}</td></tr>
<tr><td>lowercase</td><td>大小写转换</td><td>XIONG</td><td>{{ "XIONG" | lowercase }}</td></tr>
<tr><td>date</td><td>日期格式化</td><td>1490161945000</td><td>{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}}</td></tr>
<tr><td>number</td><td>保留小数</td><td>3.14159</td><td>{{3.14159 | number:2}}</td></tr>
<tr><td>currency</td><td>货币格式化</td><td>666</td><td>{{666 | currency:"¥" }}</td></tr>
<tr><td>limitTo</td><td>截取</td><td>1234567890</td><td>{{"1234567890" | limitTo:-4}}</td></tr>
<tr><td>orderBy</td><td>排序</td><td>根id降序排</td><td>{{ [{"id": 100,"age": 20,"name": "iphone"},
{"id": 1,"age": 12,"name": "android"},
{"id": 50,"age": 44,"name": "win"}
] | orderBy:'-id' }}</td></tr>
<tr><td>orderBy</td><td>排序</td><td>根据id升序排</td><td>{{ [{"id": 100,"age": 20,"name": "iphone"},
{"id": 1,"age": 12,"name": "android"},
{"id": 50,"age": 44,"name": "win"}
] | orderBy:'id' }}</td></tr>
<tr><td>filter</td><td>查找</td><td>查找name为iphone的行</td><td>{{ [{"id": 100,"age": 20,"name": "iphone"},
{"id": 1,"age": 12,"name": "android"},
{"id": 50,"age": 44,"name": "win"}
] | filter:{'name':'iphone'} }}</td></tr>
</table>
过滤器 | 功能 | 原始数据 | 过滤后的数据 |
uppercase | 大小写转换 | dream | DREAM |
lowercase | 大小写转换 | XIONG | xiong |
date | 日期格式化 | 1490161945000 | 2017-03-22 13:52:25 |
number | 保留小数 | 3.14159 | 3.14 |
currency | 货币格式化 | 666 | ¥666.00 |
limitTo | 截取 | 1234567890 | 7890 |
orderBy | 排序 | 根id降序排 | [{"id":100,"age":20,"name":"iphone"},{"id":50,"age":44,"name":"win"},{"id":1,"age":12,"name":"android"}] |
orderBy | 排序 | 根据id升序排 | [{"id":1,"age":12,"name":"android"},{"id":50,"age":44,"name":"win"},{"id":100,"age":20,"name":"iphone"}] |
filter | 查找 | 查找name为iphone的行 | [{"id":100,"age":20,"name":"iphone"}] |
2.在controller或service中使用filter
我们的js代码中也可以使用过滤器,方式就是我们熟悉的依赖注入,例如我要在controller中(service中)使用currency过滤器,只需将它注入到该controller中(service中)即可,代码如下:
此时你可能会有疑惑,如果我要在controller中使用多个filter,难道要一个一个注入吗,这岂不太费劲了?
莫着急~ng提供了一个filter服务可以来调用所需的filter,可以达到同样的效果,使用方法如下:
(function () {
'use strict';
angular
.module('app.user')
.controller('TestFilterCtrl', TestFilterCtrl);
TestFilterCtrl.$inject = ['$filter', 'currencyFilter'];
/* @ngInject */
function TestFilterCtrl($filter, currencyFilter) {
activate();
////////////////////////////////
function activate() {
console.log('单独调用过滤器',currencyFilter(666));//¥666.00
var array = [{'id': 100, 'age': 20, 'name': 'iphone'}, {'id': 1, 'age': 12, 'name': 'android'}, {'id': 50,'age': 44, 'name': 'win'}];
console.log('过滤器 功能 原始数据 ', '过滤后的数据');
console.log('uppercase 大小写转换 dream ', $filter('uppercase')('dream'));
console.log('lowercase 大小写转换 XIONG ', $filter('lowercase')('XIONG'));
console.log('date 日期格式化 152829213500 ', $filter('date')(1528292135000, 'yyyy-MM-dd HH:mm:ss'));
console.log('date 日期格式化 2019.05.08 ', $filter('date')(new Date('2019.05.08'), 'yyyy-MM-dd HH:mm:ss'));
console.log('number 保留小数 3.14159 ', $filter('number')(3.14159, 2));
console.log('currency 货币格式化 666 ', $filter('currency')(666, '¥'));
console.log('limitTo 截取 1234567890 ', $filter('limitTo')(1234567890, 6));
console.log('orderBy 排序 根id降序排 ', $filter('orderBy')(array, '-id'));
console.log('orderBy 排序 根据id升序排 ', $filter('orderBy')(array, 'id'));
console.log('filter 查找 查找name为iphone的行 ', $filter('filter')(array, {'name': 'iphone'}));
//过滤器 功能 原始数据 过滤后的数据
//uppercase 大小写转换 dream DREAM
//lowercase 大小写转换 XIONG xiong
//date 日期格式化 152829213500 2018-06-06 21:35:35
//date 日期格式化 2019.05.08 2019-05-08 00:00:00
//number 保留小数 3.14159 3.14
//currency 货币格式化 666 ¥666.00
//limitTo 截取 1234567890 123456
//orderBy 排序 根id降序排 [{'id': 100…}, {'id': 50…}, {'id': 1…}]
//orderBy 排序 根据id升序排 [{'id': 1…}, {'id': 50…}, {'id': 100…}]
//filter 查找 查找name为iphone的行 [{'id':100,'age':20,'name':'iphone'}]
}
}
})();