[AngularJS] (9) 필터 | uppercase, lowercase, orderBy, currency, date, filter, json, limitTo, number
목차
(1) 기본 웹 서비스 개발환경 구축
(2-1) 기본 예제
(2-2) AngularJS 템플릿 만들고 적용하기
(3) 표현식 | {{data}}
(4) 모듈 | angular.module("appName", [])
(5) 지시자 | angular.directive(), ng-app, ng-init, ng-repeat
(6) 모델 | ng-model, ng-show, valid, dirty, touched
(7) Controller
(8) scope 객체 | scope, rootScope
(9) 필터 | uppercase, lowercase, orderBy, currency, date, filter, json, limitTo, number
(10) 서비스 | location, get, timeout, interval, app.service()
출력하는 데이터에 대해 필터를 적용해 데이터를 가공
- uppercase: 모든 글자로 대문자로 변환
- lowercase: 모든 글자를 소문자로 변환
- orderBy : 정렬 기준 설정
- currency : 숫자에 통화를 적용
- date : 날짜 데이터의 출력 포맷 설정
- filter : 지정된 문자열을 가진 태그만 표시
- json : javascript 객체를 json 문법으로 출력
- limitTo : 지정된 숫자만큼 표시
- number : 지정된 숫자에 3자리마다 콤마 삽입
> data | uppercase / lowercase : 대소문자 변환
> data | orderBy : '정렬기준' : 설정한 정렬기준으로 데이터를 정렬
> data | currency : 특정 국가의 통화로 표현
* locale을 한국으로 설정해주는 것이 필요
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.8.2/angular-locale_ko-kr.min.js"></script>
> data | date : '날짜포맷' : 지정한 포맷으로 날짜를 변환
* 요일을 출력하기 위해선 locale을 한국으로 설정해주는 것이 필요
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.8.2/angular-locale_ko-kr.min.js"></script>https://docs.angularjs.org/api/ng/filter/date
위의 링크에 설명되어 있는 와일드 카드를 이용해서 원하는 출력포맷을 설정할 수 있다.
> data | filter : '필터링할 문자열' : 특정 문자가 포함된 요소만 필터링
> data | limitTo : 출력할 개수[ : 시작 index] : 배열 혹은 문자열의 사용갯수 및 시작 인덱스 제어
> data | number : 숫자 출력시 3자리마다 ,를 삽입
