Angular 中的 Ng-Repeat 过滤器
Rana Hasnain Khan
2022年4月20日
我们将介绍如何在 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
中的 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
中的过滤器属性来过滤掉我们喜欢的结果。
Author: 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.
LinkedIn