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 객체를 생성하고 그것을 바탕으로 지정된 형식으로 포맷된 텍스트를 얻을 수 있다.
이와 같이 필터를 사용하면 단순한 수치가 금액 표기하거나 날짜를 표시할 수도 있다.
표준 필터
필터는 매우 쉽게 사용할 수 있지만, 도대체 어떤 필터가 준비되어 있는지 모르면 사용 방법할 수 없다. 여기에서 AngularJS에 표준으로 제공되는 필터에 대해 설명한다.
currency
숫자를 금액으로 표기하기 위한 필터이다. 단순히 currency만 지정하면 달러 표기로 표시된다. currency : '₩' 이렇게 하면 원화가 표시된다.
date
Date 값을 정해진 형식의 날짜 텍스트에 서식하는 필터이다. 포맷의 이름이나 어떤 패턴을 값으로 지정한다. 포맷의 이름과 패턴에서 사용할 수 있는 메타 문자는 다음과 같다.
포맷 이름
| 포멧 이름 | 설명 |
|---|---|
| short, shortTime, shortDate | 짧은 형식의 포맷이다. |
| medium, mediumTime, mediumDate | 통상적으로 사용되는 형식의 포맷이다. |
| longDate, fullDate | 긴 형식의 날짜 포맷이다. |
패턴의 메타 문자
| 문자 | 설명 |
|---|---|
| y | 년 (서기)를 나타낸다. |
| M | 월을 나타낸다. |
| d | 일을 나타낸다. |
| E | 요일을 나타낸다. |
| H | 24시간제의 시간을 나타낸다. |
| h | 12시간제의 시간을 나타낸다. |
| m | 분을 나타낸다. |
| s | 초를 나타낸다. |
| .sss | 밀리 초를 나타낸다. |
| a | 오전, 오후를 나타낸다. |
| z | 타임존을 나타낸다. |
number
숫자를 특정 자릿수로 반올림하여 표시하는 필터이다. 예를 들어, number : 4라고 하면 앞에 4자리만 표시하고 5번째 자리를 반올림한다.
json
객체의 값을 JSON 형식으로 변환하여 출력하는 필터이다.
uppercase / lowercase
텍스트를 모두 대문자 또는 소문자로 변환하는 필터이다.
커스텀 필터
필터는 기본적으로 제공되는 것뿐만 아니라 사용자가 직접 필터를 만들 수 있다. 이 커스텀(사용자 정의) 필터는 다음과 같은 형태로 정의된다.
컨트롤러.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 값을 생성되는지 알면 의외로 간단히 만들 수 있다. 또한 만든 필터를 이용하는 것도 매우 간단하다. 용도에 따라 자신만의 필터를 만들 수 있게 되면, 표현력도 훨씬 좋아진다.