[AgularJS 1.x] 필터 종류 (1/3) - 기본 필터 어디까지 써봤니? 'filter'부터 'limitTo'까지

앵귤러JS에서는 데이터를 출력할 때 필터를 적용해서 출력할 수 있습니다.

AngularJS API Reference - filter

 

이 포스팅에서는

배열을 필터링하는 'filter'

통화 표시 필터인 'currency'

숫자 처리 필터인 'number'

날짜 처리 필터인 date

제이썬(Json)으로 표시해주는 'json'

소문자로 바꿔주는 'lowercase'

대문자로 바꿔주는 'uppercase'

글자 갯수를 잘라주는 'limitTo'

를 다룹니다.

 

연관글 영역

 

 

 

1. filter

참고 : AngularJS API Reference - filter

 

배열을 필터링해주는 필터입니다.

리턴이 배열로 오기 때문에 반복문(ng-repeat)으로 활용하거나 바인딩하는 것이 가능합니다.

 

 

2. currency

참고 : AngularJS API Reference - currency

통화단위를 표시해주는 필터입니다.

달러와 같이 소수점으로 표현되는 통화의 경우 소수점 자릿수를 정할 수 있습니다.

 

 

3. number

참고 : AngularJS API Reference - number

 

숫자에 천 단위 콤마(,)를 찍어주고 소수점 자릿수 표현을 해줍니다.

 

 

4. date

참고 : AngularJS API Reference - date

 

날짜를 지정할 포맷에 맞게 출력해 줍니다.

직접 포맷을 만들어서 지정할 수도 있고 미리 지정된 포맷을 이용할 수 있습니다.

레퍼런스를 확인하세요~

 

 

5. Json

참고 : AngularJS API Reference - json

 

지정된 데이터(배열, 오브젝트 등등)을 제이썬(json) 포멧으로 바꿔 줍니다.

 

 

6. lowercase, uppercase

참고 : AngularJS API Reference - lowercase, uppercase

 

영어를 소문자로 변환(lowercase), 대문자로 변환(uppercase)하는 필터입니다.

 

 

7. limitTo

참고 : AngularJS API Reference - limitTo

 

지정된 자릿수만큼만 출력합니다.

옵션을 지정해서 시작 위치를 설정할 수 있습니다.

 

 

 

마무리

마지막으로 'orderBy'가 있는데 이건 양이 좀 많으니 따로 다루도록 하겠습니다.