未加星标

AngularJS中的过滤器filter用法完全解析

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

在AngularJS的世界里,filter提供了一种格式化数据的方法,Angular也提供给我们了很多内建的过滤器,并且建立自定义过滤器也是相当的简单

在HTML的模板绑定{{}}中,我们使用 | 来调用过滤器,比如,我们想让字符串全部大写字符显示:

{{ name | uppercase }}
AngularJS中的过滤器filter用法完全解析

当然了,我们也可以在javascript中使用$filter服务来调用过滤器,还拿字符串大写来举例:

app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {

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

如何传递参数到filter呢?只需要把参数放在filter之后,中间加个冒号(如果有多个参数要传递,在每个参数后加上冒号)比如,数字过滤器可以帮助我们限制数字的位数,如果想显示两位小数,加上number:2就可以了

{{ 123.456789 | number:2 }}

filter过滤器主要用来过滤一个数组数据并返回一个包含子数组数据的新数组。

比如,在客户端搜索时,我们可以快速的从数组中过滤出我们想要的结果。

这个filter方法接收一个string,object,或者function参数用来选择/移除数组元素。

下满我们具体来看:

一,内置的过滤器
1,uppercase,lowercase大小转换
{{ "lower cap string" | uppercase }} //结果:LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} //结果:tank is good

 |这里的竖线是一种管道功能,如果对linux比较熟悉的话,这块的|根linux的管道功能,基本是一样的2,json格式化

{{ {foo: "bar", baz: 23} | json }} //结果:{ "foo": "bar", "baz": 23 }

注意:bza没格式前是没有双引号的,格式化后就转换成了json数据了。

3,date格式化

mysql时间戳 ng-bind="message.time * 1000 | date:'yyyy-mm-dd'"  

{{ 1304375948024 | date:'medium'}} //May 03, 2011 06:39:08 PM
{{ 1304375948024 | date }} //结果:May 3, 2011
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} //结果:05/03/2011 @ 6:39AM
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }} //结果:2011-05-03 06:39:08

 4,number格式化

{{ 1.234567 | number:1 }} //结果:1.2
{{ 1234567 | number }} //结果:1,234,567

 5,currency货币格式化

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

 6,filter查找 只能查value,不能查key

{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:'s'}} //查找含有有s的行

//上例结果:[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]

{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'ip'} }} //查找name like ip的行
//上例结果:[{"age":20,"id":10,"name":"iphone"}]

$filter('number')(30000, 2);
var jsonString = $filter('json')({"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}])

 7,limitTo字符串,对像的截取

{{ "i love tank" | limitTo:6 }} //结果:i love
{{ "i love tank" | limitTo:-4 }} //结果:tank

{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | limitTo:1 }} //结果:[{"age":20,"id":10,"name":"iphone"}]

 8,orderBy对像排序

{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }} //根id降序排

{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }} //根据id升序排

{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:['-age','name'] }}
二,自定filter功能
filter的自定义方式也很简单,使用module的filter方法,返回一个函数,该函数接收输入值,并返回处理后的结果。
app.filter('过滤器名称',function(){
return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){
//...做一些事情
return 处理后的对象;
}
});
我找了一个基本angularjs的mvc框架,phonecat,自定义filter也是在这基础写的,这个框架挺好用的。
filters.js添加一个module
angular.module('tanktest', []).filter('tankreplace', function() {
return function(input) {
return input.replace(/tank/, "=====")
};
});

html中调用

{{ "TANK is GOOD" | lowercase |tankreplace}} //结果:===== is good

 注意:| lowercase |tankreplace管道命令可以有多个

yourApp.filter('orderObjectBy', function() {
return function(items, field, reverse) {
var filtered = [];
angular.forEach(items, function(item) {
filtered.push(item);
});
filtered.sort(function (a, b) {
return (a[field] > b[field] ? 1 : -1);
});
if(reverse) filtered.reverse();
return filtered;
};
});

该过滤器将对象转换成标准的数组并把它通过您指定字段排序。您可以使用orderObjectBy过滤器酷似ORDERBY,包括字段名后一个布尔值,以指定的顺序是否应该得到扭转。换句话说,假的是升序,真正的下降。html调用

<li ng-repeat="item in items | orderObjectBy:'color':true">{{ item.color }}</li>
 
排序搜索
<input type="text" ng-model="search" class="form-control" placeholder="Search">
<thead>
<tr>
<!-- ng-class="{dropup:true}" -->
<th ng-click="changeOrder('id')" ng-class="{dropup: order === ''}">
产品编号
<span ng-class="{orderColor: orderType === 'id'}" class="caret"></span>
</th>
<th ng-click="changeOrder('name')" ng-class="{dropup: order === ''}">
产品名称
<span ng-class="{orderColor: orderType === 'name'}" class="caret"></span>
</th>
<th ng-click="changeOrder('price')" ng-class="{dropup: order === ''}">
产品价格
<span ng-class="{orderColor: orderType === 'price'}" class="caret"></span>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in productData | filter: search | orderBy:order + orderType">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price | currency: '¥'}}</td>
</tr>
</tbody>

angularjs

//默认排序字段
$scope.orderType = 'id';

$scope.order = '-';

$scope.changeOrder = function(type) {
console.log(type);
$scope.orderType = type;

if ($scope.order === '') {
$scope.order = '-';
}else{
$scope.order = '';
}
}

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: id,name,gt,lt,age,filter,ng,function,class,scope,过滤器,iphone
分页:12
转载请注明
本文标题:AngularJS中的过滤器filter用法完全解析
本站链接:http://www.codesec.net/view/421659.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(252)