Angular 学习之 数组filter
1 简介
Angular 提供了很多filter,其中一种就叫做filter,可以选取数组中的部分元素,并返回一个新的数组。
2 用法
可以在html或者js中使用。用法如下:
{{ filter_expression | filter:expression:comparator }}
$filter(‘filter’)(array, expression, comparator)
参数:
- array 待filter的数组
- expression 期待的元素的特征
为什么说是特征,那是因为expression的比较策略。
expression的比较策略是substring match,就是只要array中的元素或者它的部分属性包含expression中的属性字符串。如果比较双方非string,那就转化为string再比较。
expression有三种类型:
string
包含此string的元素会被选出,如果元素是object,则任何一个属性值包含此
string就会被选出。可以在string之前加!表示反选。
object
包含此object包含的属性键值对的元素会被选出。
sample:
expression = {name:'a',age:'100'};
var arr = [
{name:'abc',age:1000},
{name:'abc'}];
返回的结果是 [ {name:’abc’,age:’1000’}],因为第二个元素没有age属性。
第一个元素的age属性是int 1000,儿expression中是string 100。
可见filter的比较方式不考虑类型。
function
function可以定义更加详细的特征。
sample:
var arr = [ {name:'abc',age:1000},
{name:'abc',age:1232},
{name:'abc',age:"abc"}];
var filtedResult = $filter('filter')(this.array,function(e){
return (!angular.isUndefined(e.age))&&e.age%100==0;
});
filter会对每一个arr的元素执行function,如果返回true,就会被选出。
这里表示选择拥有age属性且age能整除100的元素。
结果是{name:'abc',age:1000},由于age abc是string,无法做除法,所以未被选出。
-comparator
判断expression和array中元素是否相等。
为什么要有comparator?
因为expression是substring match比较,expression function也只是检测array中的元素。并没有提供expression和array元素的比较机制。
comparator有三种
true
当expected和actual完全相等时才能被选中。
false 或者 undefined
相当于没有使用comparator
function
当expression是function时,comparator function失效。
一般很少使用comparator function,具体原因下。
function(expected,actual){
return expected>actual;
}
expected是指expression(如果expression是object,那就指它的属性),actual是array中的元素(如果expression是object而元素不是object,那此元素直接就忽略了)。返回true时比较通过,对于object,只有当它的所有属性都通过,才会最终被选出。
替代方案
如果必须比较expression和array元素时,可以考虑下面这种方式:
var arr = [...];
var expression = [...];
var filtedArray = $filter('filter')(arr,function(e){
//compare e and expression here
});
在js代码中,可以有很多方式来实现filter的功能。当然在html中,则需要更多的订制才能突破限制。毕竟directive不是那么简单。
3 实用指南
一般filter常用于在html页面中。
3.1 搜索
根据用户输入,过滤页面上的列表。