angularJS의 ngOptions 설정시 숫자만 사용하는 경우 방법

select 태그를 사용하여 선택 옵션을 주기 위한 방법으로 AngularJS의 ngOptions 디렉티브를 select 태그에 설정하여 사용할 수 있습니다. 이때 만약 option 값들이 숫자로만 이루어진 경우라면 가장 간단한 방법으로 구현할 수 있습니다.

# AngluarJS에서 숫자로만 구성된 select 태그를 ngOptions 사용해 만들기

숫자로만 구성된 옵션값은 어떻게 하면 가장 쉽고 빠르게 만들 수 있는지 알아봅니다. 예를들어 1부터 10까지의 범위에 해당하는 옵션값을 만들 수 있습니다. 아래를 봐주세요.

! 1부터 10까지의 값을 가지는 select 태그 option 만들기

아래 예제는 1부터 10까지의 값을 가지는 select 태그를 ngOptions를 사용하여 만들어보겠습니다.
@ ng-option.html

totalNum 변수에 사용된 값들을 option 값으로 사용하게 됩니다. 변수를 선언하는 방법은 아래 스크립트 코드입니다.

@ ng-option.js

설명하면 먼저 빈배열을 하나 만든 뒤 일련된 숫자 값들을 배열로 추가하면됩니다. 매우 간단하여 배열값을 추가하는 방법으로 for() 반복문을 사용하였습니다. 배열에 추가하기 위해서 push() 함수를 사용하였습니다.

# 마치면서

여기까지 ng-options에 일련된 숫자를 선택할 수 있는 방법을 알아봤습니다. 참고로 이 방법 외에도 커스텀 필터를 만들어 사용하는 방법도 많이 사용되더군요. 아무래도 자주 사용되는 경우라면 공통으로 적용 가능한 필터를 만들어 사용하는 방법도 좋을 것입니다. 필터 적용 방법은 다음에 다시 알아보도록 하겠습니다.