AngularJS | 필터 | 필터란?


AngularJS에는 {{}}라는 태그를 사용하여, 다양한 값을 표시할 수 있다. 단순히 값을 표시할 뿐이라면 대부분 프로그래밍이 아니었다. 그러나 값이라는 것은 단순히 “전달된 것을 그대로 표시할 뿐"이라는 것만은 아니다.

예를 들어, 숫자 값을 금액으로 ₩ 기호를 표시하려고 한다고 하자. 이 경우 모든 출력 부분에 ₩ 기호를 추가해 간다는 것은 그렇게 쉽다고 할 수 없다.

이런 경우에 이용되는 것이 “필터"이다. 필터는 다양한 값을 자동으로 조작할 수 있는 기능이다. 이것은 다음과 같이 사용한다.

{{변수 | 필터}}

변수의 후에 | 기호를 붙이고 그 다음에 필터를 제공한다. 여러 필터를 동시에 사용하려면,

{{변수 | 필터1 | 필터2 | ...}}

이렇게 하면 몇개도 연결해 쓸 수 있다.

이 필터는 AngularJS 자체에 일반적인 것이 몇 가지가 제공되며, 언제든지 사용할 수 있다. 또한 자신의 필터를 프로그램화하여 사용할 수도 있다.

모듈 및 컨트롤러 생성

필터를 이용한 예제를 만들어 보자. 먼저 프로그램부터 작성한다.

아래 프로그램의 간단한 예제 코드를 올려 두었다. script.js 파일명으로 저장한다.

var myapp = angular.module('myapp',[]);
var helo = myapp.controller('HeloController',
    function(){
        this.count = 0;
        this.data = [
            {id:0,name:'no data',price:0,get:false,date:1450100000000},
            {id:1,name:'Android phone',price:7800,get:true,date:1450400000000},
            {id:2,name:'New iPhone',price:549020,get:false,date:1450200000000},
            {id:3,name:'windows phone',price:38765,get:true,date:1450300000000}
        ];
        this.getData = function(){
            return this.data[this.count].id + ': ' + 
                this.data[this.count].name + ', ' + 
                this.data[this.count].price + '.' +
                this.data[this.count].date;
        };
    }
);

이번에는 HeloController 클래스에 count, data, getData 라는 속성과 메소드를 정의하고 있다. data는 매우 간단한 카탈로그 같은 것을 나타낸다. ID, 이름, 가격 그리고 가지고 있는지에 대한 여부를 나타내는 부울값, 등록 일시 등의 정보가 있다. 등록 일시는 타임 스탬프의 정수값으로 지정되어 있다.

이 data의 데이터를 템플릿으로 표시할 때에 필터를 이용하기로 한다.

값을 필터링

필터를 사용하여 데이터를 표시시켜 본다. HTML 파일의 샘플을 아래에 올려 두었다.

<! DOCTYPE html>
<html>
<head>
    <title>AngularJS Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="script.js"></script>
    <style>
    body { color:gray; }
    h1 { font-size:18pt; font-weight:bold; }
    span.label { display:inline-block;width:50px; color:red; }
    input { width:100px; }
    .msg { font-size:14pt; font-weight:bold;color:gray; }
    th { color:#eee; background-color:#999; padding: 5px 10px;}
    td { color:#333; background-color:#ddd; padding: 5px 10px;}
    </style>
</head>
<body ng-app="myapp" ng-init="num=0">
    <h1>데이터 표시</h1>
    <div ng-controller="HeloController as ctl">
     
    <table>
    <tr><th>ID</th><th>NAME</th><th>PRICE</th><th>GET?</th><th>DATE</th></tr>
    <tr ng-repeat="obj in ctl.data">
        <td>{{obj.id}}</td>
        <td>{{obj.name}}</td>
        <td>{{obj.price | currency:'₩'}}</td>
        <td>{{obj.get}}</td>
        <td>{{obj.date | date:'yyyy-MM-dd'}}</td>
    </tr>
    </table>
     
    </div>
</body>
</html>

이와 같이 소스 코드를 다시 브라우저에 표시하려고 한다.

이번에는 PRICE 및 DATE 항목에 필터를 설정하여 두었습니다. 각각의 출력을 하고 있는 부분을 살펴 보자.

PRICE 출력

{{obj.price | currency : '₩'}}

obj.price 다음에 “currency"라는 필터를 설정하고 있다. 이것은 숫자를 금액으로 포맷하여 표시하는 필터이다. 필터에 따라 필요한 값을 준비하는 것이 있다. 이 currency도 그중 하나로 ‘₩’으로 지정하여 원형 표기에 설정할 수 있다. 출력된 표시를 보면 “₩ 7,800.00"라는 형식으로 표시되는 것을 확인할 수 있을 것이다.

DATE 출력

{{obj.date | date : 'yyyy-MM-dd'}}

obj.date 다음에 “date"라는 필터가 설정되어 있다. 이것은 Date 객체의 값을 특정 형식으로 포맷하는 필터이다. 여기에서는 ‘yyyy-MM-dd’로 설정하고 있다. 이것으로 예를 들어 “2015-12-14"라는 형식으로 날짜가 표시된다.

그런데 date 값은 타임 스탬프 정수였다. date 필터를 이용하면 타임 스탬프를 바탕으로 Date 객체를 생성하고 그것을 바탕으로 지정된 형식으로 포맷된 텍스트를 얻을 수 있다.

이와 같이 필터를 사용하면 단순한 수치가 금액 표기하거나 날짜를 표시할 수도 있다.