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.

Angular ng-repeat의 필터

Angular `ng-repeat`의 필터