Ng-Repeat Filter in Angular
Wir werden vorstellen, wie man die Eigenschaft filter in ng-repeat in Angular verwendet.
Filtern Sie in Angular Ng-Repeat
Ng-repeat wird verwendet, um einen HTML-Satz zu wiederholen, bis die Elemente in der Liste angezeigt werden. Es ist praktisch, eine Liste von Daten mit demselben Design auf einer Seite anzuzeigen, z. B. in Tabellen oder Blogbeiträgen.
Beim Anzeigen einer Liste von Daten in Tabellen oder Blogbeiträgen möchten wir manchmal bestimmte Daten aus dem angezeigten Ergebnis herausfiltern. Um Daten nach der Kategorie oder einem anderen spezifischen Tag anzuzeigen, können wir den filter in ng-repeat verwenden, der Daten basierend auf der gewünschten Abfrage anzeigt.
Lassen Sie uns ein Beispiel durchgehen, um filter in ng-repeat zu verstehen. Zuerst erstellen wir eine Liste von Büchern, die mit ng-repeat angezeigt werden.
Lassen Sie uns eine Liste mit vier Büchern erstellen, die angezeigt werden.
# 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"
}
]
});
Nachdem wir nun eine Liste erstellt haben, erstellen wir eine Vorlage, um unsere Liste mit ng-repeat anzuzeigen. Wir werden Bootstrap verwenden, um eine Tabelle mit dieser Bücherliste zu erstellen.
# 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>
Ausgabe:
Im Bild sehen Sie, dass wir die Bücherliste mit ng-repeat in einer Tabelle angezeigt haben.
Lassen Sie uns nun unsere Liste mit filter in ng-repeat filtern.
# 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>
Lassen Sie uns die Ausgabe überprüfen.
Im Bild sehen Sie, dass wir die Filtereigenschaft in ng-repeat ganz einfach verwenden können, um die Ergebnisse nach Belieben herauszufiltern.
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