banana like sunshine RSS FEED

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에 올려놓았습니다.