[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자리마다 ,를 삽입