FILTER
AngularJS의 Controller 안에 $scope.변수명
형태로 선언데 변수들은 View 단에서 {{변수}}
형태로 해당 변수 값을 출력할 수 있습니다.
binding 한다고 하더라구요~ 그런데 이 때
{{변수 | 필터명:옵션....}}
이런 형태로 변수명에 특정 필터를 걸어 주어
출력되는 값에 대한 조절이 가능합니다.
{{money | currency : 'won'}}
위와 같이 주면 money 라는 변수에
담긴 값이 화면에 출력될 때 환율표시가
자동으로 됩니다. 기본은 달러 표시이기
때문에 우리나라 화폐 단위인 won 으로
표시해 주기 위해 currency의 옵셥으로
'won' 을 줬습니다.사용하는 필터 뒤에
: 를 붙여줘서 옵셥을 줄 수 있습니다.
{{today | date : 'medium'}}
이런 식으로 날짜/시간 정보도
필터로 줄 수 있는데 저희가 흔히
알고 있는 yyyyMMdd 형태도
제공하고 별도로 AngularJS에서는
아래와 같은 옵션도 제공합니다.
단축형
전체날짜시간 : medium, short
전체날짜 : fullDate, longDate,
mediumDate,shortDate
전체시각 : mediumTime, shortTime
위에가 실제 예제입니다.
위에 예제를 실행한 결과는
아래와 같습니다.
자바에서 substring과 같이 값을 자르는
기능도 필터로 구현할 수 있습니다.
$scope.val = '12345689';
위와 같이 controller에 값이 선언하고,
view를 아래와 같이 코딩했습니다.
<input type='number' step='1' ng-model='num'><br>
{{val | limitTo:num}}
limitTo 필터가 val의 일부분을 가지고 오는데
0자리에서 옵셥으로 준 num 자리까지의
숫자만 자릅니다.
예를 들면 만약 num=2 라면
{{'123456789' | ㅣlimitTo : 2}}
가 되는 것이므로 결과는 12 가 됩니다.
Custom Filter
지금까지는 AngularJS에서 제공하는
필터를 단순하게 사용한 예제였습니다.
컼스텀 필터는 사용자가 직접 자신이
필요한 filter를 만들어서 위와 같이 사용
하는 데 목적이 있습니다. 똑같이
바인딩 시킬 수 있고, 옵션도 주겠죠~
커스텀 필터 예제 pdReport 카페에서
받으시면 됩니다~
>받으러 가기<
주석 부분이 선명하지 않으니
예제를 다운 받아서 보시길
권해 드립니다... 죄송합니다 ㅠ
대략적으로 설명을 드리면
일단 filter 를 구현할 모듈을 생성했고,
해당 모듈의 이름은 demo입니다.
그리고 그 demo 모듈 안에서
커스텀 필터를 구현했습니다.
아 먼저 이 필터는 어떤 기능을 하는지
설명을 드리자면 위에 소스에서 body를
보시면 중괄호 안에 각각 0, 1, 2 값을
필터를 태우려고 하고 있고, 필터명은
ox입니다. 값이 0이면 결과로 x.
값이 1이면 결과로 o를 출력하는
정말 별 의미 없는 filter인데,
커스텀 필터를 직접 만들어 보는데
의미가 있는 것이므로 어떻게 커스텀필터를
만드는지만 보시면 될 거 같습니다.
demo모듈 안에 filter 구현부를 보시면
제일 처음에 map이 있는데 0이라는 키는
x라는 값을 갖고, 1이라는 키는 o라는
값을 가지고 있습니다.
그리고 이 map을 사용하는 function을
최종적으로 return해주고 있는데
이 function에 파라미터 data가
존재하는데 이 data로는 body에서
중괄호 안에 입력한 0, 1, 2,가
들어오게 됩니다. 그래서 이 값을 보고
filter 안에 function에서 o나 x를
최종적으로 리턴해주게 되고, 그 값이
view에 출력이 되는 겁니다.
No comments:
Post a Comment