Angular 中的 Ng-Repeat 过滤器

Rana Hasnain Khan 2024年2月15日

Angular Angular Ng

我们将介绍如何在 Angular 的 ng-repeat 中使用 filter 属性。

Angular Ng-Repeat 中的过滤器

Ng-repeat 用于重复一组 HTML，直到显示列表中的项目。在页面上显示具有相同设计的数据列表很方便，例如在表格或博客文章中。

在表格或博客文章中显示数据列表时，有时我们希望从显示的结果中过滤特定数据。要根据类别或任何其他特定标签显示数据，我们可以使用 ng-repeat 中的 filter，它将根据我们想要的查询显示数据。

让我们通过一个例子来理解 ng-repeat 中的 filter。首先，我们将创建一个使用 ng-repeat 显示的书籍列表。

让我们创建将显示的四本书的列表。

# angular
var app = angular.module("myList", []);
app.controller("ListCtrl", function($scope) {
  $scope.records = [
    {
      "Name" : "Book 1",
      "Publisher" : "Germany"
    },
    {
      "Name" : "Book 2",
      "Publisher" : "Czeck"
    },
    {
      "Name" : "Book 3",
      "Publisher" : "Canada"
    },
    {
      "Name" : "Book 4",
      "Publisher" : "Australia"
    }
  ]
});

现在我们已经创建了一个列表，我们将创建一个模板来使用 ng-repeat 显示我们的列表。我们将使用 Bootstrap 创建一个包含此图书列表的表格。

# angular
<body ng-app="myList">
<table ng-controller="ListCtrl" border="1">
<tr ng-repeat="book in records">
  <td>{{book.Name}}</td>
  <td>{{book.Publisher}}</td>  
</tr>
</table>
</body>

输出：

使用 ng-repeat 的书籍表

在图像中，你可以看到我们使用 ng-repeat 将书籍列表显示到表格中。

现在让我们使用 ng-repeat 中的 filter 过滤我们的列表。

# angular
<body ng-app="myList">
<table ng-controller="ListCtrl" border="1">
<tr ng-repeat="book in records | filter: {Name: 'Book 1'} ">
  <td>{{book.Name}}</td>
  <td>{{book.Publisher}}</td>  
</tr>
</table>
</body>

让我们检查一下输出。

使用 ng-repeat 过滤器的书籍表

在图像中，你可以看到我们可以轻松地使用 ng-repeat 中的过滤器属性来过滤掉我们喜欢的结果。

作者： Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.