Filtre Ng-Repeat en Angular
Nous allons vous présenter comment utiliser la propriété filter dans ng-repeat dans Angular.
Filtrer dans Angular Ng-Repeat
Ng-repeat est utilisé pour répéter un ensemble de HTML jusqu’à ce que les éléments de la liste soient affichés. Il est pratique d’afficher une liste de données avec le même design sur une page, comme dans des tableaux ou des articles de blog.
Lors de l’affichage d’une liste de données dans des tableaux ou des articles de blog, nous souhaitons parfois filtrer des données spécifiques à partir du résultat affiché. Pour afficher les données en fonction de la catégorie ou de toute autre balise spécifique, nous pouvons utiliser le filter dans ng-repeat, qui affichera les données en fonction de la requête que nous voulons.
Passons en revue un exemple pour comprendre filter dans ng-repeat. Tout d’abord, nous allons créer une liste de livres affichés à l’aide de ng-repeat.
Créons une liste de quatre livres qui seront affichés.
# 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"
}
]
});
Maintenant que nous avons créé une liste, nous allons créer un modèle pour afficher notre liste en utilisant ng-repeat. Nous allons utiliser Bootstrap pour créer un tableau avec cette liste de livres.
# 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>
Production :
Dans l’image, vous pouvez voir que nous avons affiché la liste des livres dans un tableau en utilisant ng-repeat.
Filtrons maintenant notre liste en utilisant filter dans ng-repeat.
# 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>
Vérifions la sortie.
Dans l’image, vous pouvez voir que nous pouvons facilement utiliser la propriété filter dans ng-repeat pour filtrer les résultats comme nous le souhaitons.
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