AngularJS 的filter 过滤器用于对数组进行筛选,它可以与ngrepeat 指令一起使用,以便在视图中显示满足特定条件的数组元素,以下是关于filter 过滤器的详细语法和用法。

1. 基本语法
filter 过滤器的基本语法如下:
{ { array | filter:expression }}array:要筛选的数组。
expression:用于筛选数组元素的表达式,可以是字符串、函数或对象。
2. 字符串表达式
当expression 是字符串时,filter 过滤器会筛选出数组中包含该字符串的元素。
<div ngrepeat="item in items | filter:apple"> { { item }} </div>在这个例子中,只有包含 "apple" 的数组元素会被显示。

3. 函数表达式
当expression 是函数时,filter 过滤器会将数组中的每个元素传递给该函数,如果函数返回true,则该元素会被包含在筛选结果中。
<div ngrepeat="item in items | filter:myFilter"> { { item }} </div> $scope.myFilter = function(item) { return item.length > 4; };在这个例子中,只有长度大于 4 的数组元素会被显示。
4. 对象表达式
当expression 是对象时,filter 过滤器会筛选出数组中满足对象属性条件的元素。
<div ngrepeat="item in items | filter:{ color:red}"> { { item }} </div>在这个例子中,只有颜色为 "red" 的数组元素会被显示。
5. 全局过滤器

除了在ngrepeat 指令中使用filter 过滤器外,还可以将其应用于控制器中的数组。
var filteredItems = $filter(filter)($scope.items, { color:red});在这个例子中,filteredItems 将包含颜色为 "red" 的数组元素。
6. 自定义过滤器
你还可以通过创建自定义过滤器来扩展filter 过滤器的功能。
angular.module(myApp, []).filter(myCustomFilter, function() { return function(input, condition) { var result = []; for (var i = 0; i < input.length; i++) { if (input[i] === condition) { result.push(input[i]); } } return result; }; });在这个例子中,我们创建了一个名为myCustomFilter 的自定义过滤器,它接受一个输入数组和一个条件,然后返回包含满足条件的元素的新数组。
下面是一个描述AngularJS中filter过滤器的语法的介绍。
参数 类型 描述 expression string 用于匹配的字符串或者一个表达式,通常是要过滤的数组。 comparator function(array, item) (可选) 一个比较函数,用于定义两个对象是否相等,默认情况下使用indexOf来比较字符串和数字。 filterFn function(item) (可选) 一个函数,用于测试数组中的每个元素是否应该被包含在结果中。 index string (可选) 用于标识filterFn中的$index变量。基本语法:
{ { someArray | filter:expression:comparator:filterFn:index }}下面是每个参数的详细说明:
1、expression:
这是用于过滤数组的基础字符串或表达式。
text、name、searchText。
2、comparator:
这是一个可选参数,用于定义比较逻辑。
如果不提供,默认情况下过滤器将使用indexOf方法。
可以定义一个比较函数来处理大小写敏感的过滤。
3、filterFn:
这是一个可选参数,用于定义自定义过滤逻辑。
这个函数应该返回一个布尔值,指示项是否满足条件。
function(item) { return item > 10; }。
4、index:
这是一个可选参数,允许在filterFn中引用当前元素的索引。
如果提供了filterFn,并且需要在函数中使用索引,可以使用index参数。
示例:
<!过滤数组,只显示包含"apple"的项 > { { fruits | filter:apple }} <!使用比较器,进行大小写敏感的过滤 > { { fruits | filter:searchText:caseSensitiveComparator }} <!使用自定义过滤函数 > { { numbers | filter:isEvenNumber }}在JavaScript中定义比较器和过滤函数:
$scope.caseSensitiveComparator = function(actual, expected) { return angular.equals(actual, expected); }; $scope.isEvenNumber = function(item) { return item % 2 === 0; };请注意,AngularJS已经不再更新,Angular(即Angular 2+)使用不同的语法和过滤器概念,在Angular中,建议使用管道(pipes)来处理类似功能。