angularJS의 ng-repeat directive에서 filter를 적용해서 입맛대로(!) 데이터를 뽑아내는 것에 대해서는 모두 잘 아실 것입니다.
오늘은 단순한 필터에서 한걸음 더 나아가서, 조금 더 처리를 해주어야 하는 필터를 만드는 부분을 보겠습니다.
예들 들어, 트리 구조의 다음과 같은 분식점 메뉴 데이터가 있다고 할 때 :
[{ '_id': 'ramen', 'price': '3000', 'parent': null }, { '_id': 'gimbab', 'price': '3500', 'parent': null }, { '_id': 'gimchi ramen', 'price': '3500', 'parent': 'ramen' }];
parent === null 인 데이터만 보여주고 싶다고 하면 controller에 다음과 같이 필터를 생성해줍니다.
$scope.filterParentNull = function (category) { return category.parent === null; };
그리고 이제 template 쪽에 다음과 같이 넣어주면 되겠지요? ^^
html 파일
{{$index + 1}} | {{category._id}} | {{category.price}} |
js 파일
angular.module('app', []); function Ctrl($scope) { $scope.categories = [{ '_id': 'ramen', 'price': '3000', 'parent': null }, { '_id': 'gimbab', 'price': '3500', 'parent': null }, { '_id': 'gimchi ramen', 'price': '3500', 'parent': 'ramen' }]; $scope.filterParentNull = function (category) { return category.parent === null; }; }
전체 소스는 JSFIDDLE에 올려놓았습니다.