AngularJS 中如何利用过滤器对数据进行筛选和排序-JavaScript中文网-JavaScript教程资源分享门户

在AngularJS中，过滤器(Filter)是一种通用的技术，可以用来对数组和对象数据进行筛选和排序。过滤器不仅提供了方便的API来处理数据，而且还能够将数据分离出来，减少代码中的耦合性和复杂度。

基本概念

在AngularJS中，过滤器是通过管道(Pipe)符号(|)来实现的。我们可以将需要处理的数据放在管道符号的左侧，然后在右侧添加过滤器名称和过滤器的参数。比如：

{{ data | filter:arg1:arg2 }}

在上面的代码中，data是需要处理的数据，filter是过滤器名称，arg1和arg2是过滤器的参数。

使用过滤器

AngularJS中提供了很多内置的过滤器，比如filter、orderBy、limitTo等等。我们可以直接使用这些过滤器来处理数据。

filter过滤器

filter过滤器可以用来按照指定的条件进行数据筛选。比如，我们有一个列表数据，需要筛选出其中含有'Angular'关键字的项，可以使用如下代码：

<ul>
  <li ng-repeat="item in items | filter:'Angular'">{{ item }}</li>
</ul>

上面的代码中，ng-repeat是AngularJS的重要指令，与for循环类似，用来遍历数据并渲染HTML。items是数据列表，filter:'Angular'表示按照'Angular'关键字进行筛选。

orderBy过滤器

orderBy过滤器可以用来按照指定的字段进行数据排序。比如，我们有一个学生成绩数据列表，需要按照分数进行降序排列，可以使用如下代码：

<table>
  <tr ng-repeat="item in items | orderBy:'-score'">
    <td>{{ item.name }}</td>
    <td>{{ item.score }}</td>
  </tr>
</table>

上面的代码中，-score表示按照分数字段(score)进行降序排列。

limitTo过滤器

limitTo过滤器可以用来限制输出列表的长度。比如，我们有一个文章列表，需要只显示前5篇文章，可以使用如下代码：

<ul>
  <li ng-repeat="item in items | limitTo:5">{{ item }}</li>
</ul>

上面的代码中，limitTo:5表示限制输出结果最多只显示5个条目。

自定义过滤器

除了内置的过滤器，我们也可以自定义过滤器来满足特定的需求。自定义过滤器通常包含两个部分：过滤器名称和处理函数。

定义过滤器

定义过滤器可以通过$filterProvider服务来实现，语法如下：

$filterProvider.register('filterName', function() {
  return function(input) {
    // 过滤器处理逻辑
    return output;
  }
});

上面的代码中，filterName是过滤器名称，function()是过滤器的处理函数。

使用过滤器

使用自定义的过滤器和内置的过滤器使用方式相同。比如，我们有一个需要将日期格式化的需求，可以定义一个名为dateFormat的过滤器，并使用如下代码：

<p>{{ date | dateFormat:'yyyy-MM-dd HH:mm:ss' }}</p>

总结

过滤器是AngularJS中非常重要的技术，可以用来对数据进行筛选、排序、限制输出等等操作。熟练的使用过滤器，能够提高代码的复用度和可维护性。自定义过滤器则可以解决更复杂的问题，提高代码的可扩展性。在开发过程中，我们需要根据实际需求灵活使用过滤器，并避免滥用过滤器导致性能问题。

示例代码

接下来，我们看一下如何利用过滤器在AngularJS中实现数据筛选和排序。

<html>
<head>
  <meta charset="UTF-8">
  <title>AngularJS过滤器示例</title>
  <script src="https://cdn.bootcss.com/angular.js/1.7.8/angular.min.js"></script>
</head>
<body ng-app="myApp">

<div ng-controller="myCtrl">
  <h2>AngularJS过滤器示例</h2>
  <p>原始数据：</p>
  <pre>{{ items | json }}</pre>

  <p>筛选出含有“Angular”的项：</p>
  <ul>
    <li ng-repeat="item in items | filter:'Angular'">{{ item }}</li>
  </ul>

  <p>按照分数降序排列：</p>
  <table>
    <tr>
      <th>姓名</th>
      <th>分数</th>
    </tr>
    <tr ng-repeat="item in scores | orderBy:'-score'">
      <td>{{ item.name }}</td>
      <td>{{ item.score }}</td>
    </tr>
  </table>

  <p>限制输出结果最多只显示5个条目：</p>
  <ul>
    <li ng-repeat="item in items | limitTo:5">{{ item }}</li>
  </ul>
</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.items = [
    'HTML', 'CSS', 'JavaScript', 'AngularJS', 'React', 'Vue', 'Node.js'
  ];

  $scope.scores = [
    { name: '张三', score: 90 },
    { name: '李四', score: 88 },
    { name: '王五', score: 95 },
    { name: '赵六', score: 78 }
  ];
});
</script>

</body>
</html>

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65911d2ceb4cecbf2d658f3f