[AngularJS] 문자열은 제외하고 number filter를 적용할 수는 없을까?

 

AngularJS를 사용하다 보면 여러가지 다양한 필터를 사용하게 되는데요 데이터 출력 관련한 필터 중에 기본적으로 number라는 필터가 있습니다. number 필터는 숫자를 보기 좋게 하여 출력해주는 필터로 예를들어 3자리 마다 콤마를 찍어준다거나 소수점은 기본적으로 3자리까지 반올림하여 보여줍니다. 하지만 데이터 타입이 문자열인 경우에는 number 필터를 거치면 아예 보이지 않죠. 그런데 사용하다가 보니 하나의 필터로 정수는 3자리마다 콤마를 찍어주고 소수점은 소수점 아래 자리를 모두 보여주고 문자열은 그대로 보여주는 필터가 필요하게 되었습니다. 기존의 number 필터를 그대로 이용하여 커스텀 필터를 만들어 보았습니다.

 

---

 

소스(Source)

// Custom Number Filter (string은 그대로 출력, 소수점은 3자리까지)
app.filter('numberFilter', function($filter) {
    return function(input) {
        var input_to_number = Number(input);
        
        if (input_to_number) {
            return $filter('number')(input, 3);
        } else {
            return input;
        }
    };
});

위에서 input값을 Number로 변환하는 과정이 있는데 숫자로 변환이 가능한 데이터는 변환이 될것이고 알파벳이라던지 다른 문자가 들어가있는 데이터라면 empty값이 input_to_number에 들어갈 것입니다. 따라서 숫자로 변환이 되는 데이터는 number 필터를 통하고 아닌 경우에는 input값을 그대로 보여주도록 하였습니다.

 

---

 

물론 이게 정답은 아니겠지만 혹여나 힌트가 되어질 수 있으리라 생각이 되고 제가 다시 사용할 때 제가 쓴 글을 참고하기 위하여 정리해 보았습니다.