在 AngularJS 中，ngRepeat 是一个非常有用的指令，可以帮助我们快速地遍历数组或对象并生成对应的 HTML 元素。但是，在实际使用中，我们可能需要对遍历的数据进行筛选或排序，这时就需要用到 ngRepeat 的滤波器。
什么是 ngRepeat 滤波器
ngRepeat 滤波器是一种在遍历数据时对其进行处理的方法，可以将原始数据按照一定规则进行排序、过滤、格式化等操作，再输出到页面上。它可以被用于 ngRepeat 指令中，实现对遍历结果的加工和定制。
如何使用 ngRepeat 滤波器
在 ngRepeat 指令中使用滤波器非常简单，只需要在 ng-repeat 属性后面加上一个竖线（|），然后再加上具体的滤波器名称即可。例如，下面的代码使用了 filter 滤波器来过滤数组中的元素：
---- --- --------------- -- ----- - ------------------------- --------- ------- -----
其中，items 是要遍历的数组，filterFunction 是一个自定义的过滤函数，它接受一个参数并返回一个布尔值，表示该元素是否应该被保留。当 ngRepeat 遍历数组时，会依次将每个元素传给 filterFunction 函数进行判断，只有返回真值的元素才会被输出。
除了 filter 滤波器外，AngularJS 还提供了很多其他有用的滤波器，如 orderBy、limitTo、currency 等，它们分别用于对数组进行排序、截取、格式化等操作，具体使用方法可以参考 AngularJS 的官方文档。
示例代码
下面是一个简单的示例代码，演示了如何在 ngRepeat 中使用 filter 滤波器来过滤数组中的元素：
---- -------------- -----------------------
------ ----------- -------------------
----
--- --------------- -- ----- - ------------------------- --------- -------
-----
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
------------ - -
- ----- ----- ---- -- --
- ----- ----- ---- -- --
- ----- ----- ---- -- -
--
--------------------- - -------------- -
------ --------------------------------- --- ---
--
---
---------在上面的代码中，我们创建了一个 ng-app，并定义了一个名为 myCtrl 的控制器。控制器中包含一个数组 items 和一个过滤函数 filterFunction，用于实现输入关键字搜索的功能。当用户在输入框中输入关键字时，ng-model 指令会把该值绑定到 $scope.keyword 变量上，然后 ng-repeat 指令会调用 filterFunction 函数，根据关键字过滤出符合条件的元素并输出到页面上。
总结
ngRepeat 滤波器是 AngularJS 中非常实用的一个特性，可以帮助我们快速地对遍历数据进行加工和筛选。在实际开发中，我们经常需要用到它来实现各种复杂的需求，因此深入理解 ngRepeat 滤波器的原理和使用方法是非常有必要的。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/15328