AngularJS | 필터 | 커스텀 필터

필터는 기본적으로 제공되는 것뿐만 아니라 사용자가 직접 필터를 만들 수 있다. 이 커스텀(사용자 정의) 필터는 다음과 같은 형태로 정의된다.

컨트롤러.filter(이름, 함수);

컨트롤러 filter 메소드를 사용하여 필터를 등록한다. 인수에는 필터 이름과 필터 처리를 구현한 함수가 필요하다.

인수에 설정되는 함수는 대체로 다음과 같은 형태로 정의해야 한다.

function(val) {
    ...... 중략 ......
    return 값;
}

인수로 전달되는 것이 필터에 걸린 원래 값이다. 그리고 return하는 것이 필터링된 값이다. 즉, 함수에서 인수 값을 어떻게 변환하여 return할지 생각하면서 코딩하면 필터는 비교적 쉽게 만들 수 있다.

getIt 필터

그럼 간단한 예제를 만들어 보자. 컨트롤러에 준비되어 있는 data에 구입 여부를 부울값으로 나타내는 “get"값이 있었다. 이것을 좀 더 알기 쉽게 표시하는 필터를 생각해 보다.

아래에 예제을 올려 두었다.

helo.filter('getIt', 
    function(){
        return function(val) {
            return val ? "✔" : "－";
        };
    }
);

이를 script.js 끝에 추가한다. 그리고 HTML 파일의 get을 표시하고 있는 부분인 {{obj.get}} 여기에 다음과 같이 수정한다.

<td>{{obj.get | getIt}}</td>

이렇게 get에 필터를 넣으면 “✔"가 표시되는 것을 확인할 수 있다. 여기에서 val의 값에 따라 “✔"또는 “-“중 하나를 return하도록 되어 있는데, true라면 “✔”, false이면 “-“로 표시되게 된다.

필터에 값을 설정

필터에는 currency나 date처럼 어떤 값을 설정하고 호출 할 수도 있다. 여기서 그 방법을 설명한다.

이는 간단합니다. 필터 함수를 정의할 때, 두번째 인수를 지정하여 값을 전달할 수 있다.

앞에서 만든 필터 getIt을 수정하여 값을 전달할 수 있도록 해보자. 아래에 간단한 예제를 올려두었다.

helo.filter('getIt', 
    function(){
        return function(val,opt) {
            var t = (opt == null) ? '✔' : opt;
            return val ? t : '-';
        };
    }
);

두번째 인수 opt의 값이 null 없는지 확인하고, null가 아닌 경우는 true시에 return하도록 수정되었다. null의 경우는 “✔"를 return한다.

그러고 HTML 파일의 obj.get을 출력하고 있는 부분에 다음과 같이 수정한다.

<td>{{obj.get | getIt:'●'}}</td>

이것으로 값이 true라고 “●”, false이면 “-“로 표시되도록 되었다. getit : '●'와 같이 준비한 값이 그대로 true의 표시가 되는 것이다. 또 다른 값을 변경하여 표시가 잘되는지 확인해 본다.

필터는 인수에 어떻게 return 값을 생성되는지 알면 의외로 간단히 만들 수 있다. 또한 만든 필터를 이용하는 것도 매우 간단하다. 용도에 따라 자신만의 필터를 만들 수 있게 되면, 표현력도 훨씬 좋아진다.