Angular の ng-Repeat フィルター
Angular の ng-repeat で filter プロパティを使用する方法を紹介します。
Angular の ng-repeat におけるフィルター
Ng-repeat は、リスト内の項目が表示されるまで HTML のセットを繰り返すために使用されます。表やブログ投稿のように、同じデザインのデータのリストをページに表示すると便利です。
表やブログ投稿にデータのリストを表示しているときに、表示された結果から特定のデータをフィルタリングしたい場合があります。カテゴリまたはその他の特定のタグに従ってデータを表示するには、ng-repeat の filter を使用できます。これにより、必要なクエリに基づいてデータが表示されます。
ng-repeat の filter を理解するための例を見てみましょう。まず、ng-repeat を使用して表示される本のリストを作成します。
表示される 4 冊の本のリストを作成しましょう。
# 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 の filter プロパティを使用して、必要に応じて結果をフィルターで除外できることがわかります。
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