AngularJS 在Angular.js中的搜索过滤器

在本文中，我们将介绍AngularJS中的搜索过滤器。搜索过滤器是AngularJS的一个重要功能，它可以用于在数据集合中进行搜索和过滤。我们将学习如何使用AngularJS内置的搜索过滤器和如何自定义搜索过滤器来满足我们的需求。

内置的搜索过滤器

AngularJS提供了几个内置的搜索过滤器，我们可以直接在模板中使用它们。下面是一些常用的内置过滤器：

filter: 在数据集合中搜索指定的关键字并返回匹配的结果。
orderBy: 根据指定的属性对数据集合进行排序。
limitTo: 限制返回的结果数量。

让我们来看一个例子，假设我们有一个学生列表，我们想要搜索姓氏以”B”开头的学生。我们可以使用filter过滤器来实现这个功能。

<div ng-controller="StudentController">
  <input type="text" ng-model="search" placeholder="Search by last name">
  <ul>
    <li ng-repeat="student in students | filter: {last_name: search}">
      {{ student.first_name }} {{ student.last_name }}
    </li>
  </ul>
</div>

在上面的例子中，我们绑定了一个输入框的ng-model到search变量上。然后，在ng-repeat指令中使用了filter过滤器，通过传入{last_name: search}作为参数来过滤出姓氏以搜索关键字开头的学生。

自定义搜索过滤器

除了使用内置的搜索过滤器，我们还可以自定义搜索过滤器来满足特定的需求。自定义过滤器可以在控制器或模块中定义，并在模板中使用。

angular.module('myApp', [])
  .filter('startsWithB', function() {
    return function(input) {
      var result = [];
      for (var i = 0; i < input.length; i++) {
        if (input[i].last_name[0].toUpperCase() === 'B') {
          result.push(input[i]);
        }
      }
      return result;
    };
  });

在上面的例子中，我们定义了一个名为startsWithB的过滤器。它接受一个输入参数，并遍历输入数组中的每一项。如果该项的姓氏以字母”B”开头，则将其添加到结果数组中。

现在，让我们在模板中使用这个自定义过滤器。

<div ng-controller="StudentController">
  <input type="text" ng-model="search" placeholder="Search by last name">
  <ul>
    <li ng-repeat="student in students | startsWithB">
      {{ student.first_name }} {{ student.last_name }}
    </li>
  </ul>
</div>

在上面的例子中，我们使用了startsWithB过滤器来过滤出姓氏以”B”开头的学生。同样的，我们绑定了一个输入框的ng-model到search变量上，它作为过滤器的输入参数。