AngularJS ng-options 완벽 가이드

ng-options는 AngularJS에서 select 드롭다운을 동적으로 생성하는 디렉티브입니다. ng-repeat보다 성능이 우수하고 객체 바인딩을 지원합니다.

1. 기본 문법

<!-- 배열에서 옵션 생성 -->
<select ng-model="selectedItem" 
        ng-options="item for item in items">
</select>

<!-- 기본 선택 옵션 추가 -->
<select ng-model="selectedItem" 
        ng-options="item for item in items">
  <option value="">선택하세요</option>
</select>

2. 객체 배열 사용

// Controller
$scope.users = [
  {id: 1, name: "홍길동", dept: "개발팀"},
  {id: 2, name: "김철수", dept: "기획팀"},
  {id: 3, name: "이영희", dept: "디자인팀"}
];

<!-- 표시값 as 실제값 for 아이템 in 배열 -->
<select ng-model="selectedUser"
        ng-options="user.name for user in users">
</select>

<!-- ID를 값으로, 이름을 라벨로 -->
<select ng-model="selectedUserId"
        ng-options="user.id as user.name for user in users">
</select>

3. 그룹화 (group by)

<!-- 부서별 그룹화 -->
<select ng-model="selectedUser"
        ng-options="user.name group by user.dept for user in users">
</select>

<!-- 결과 -->
<optgroup label="개발팀">
  <option>홍길동</option>
</optgroup>
<optgroup label="기획팀">
  <option>김철수</option>
</optgroup>

4. 정렬 및 필터링

<!-- 이름순 정렬 -->
<select ng-model="selected"
        ng-options="u.name for u in users | orderBy:name">
</select>

<!-- 필터링 -->
<select ng-model="selected"
        ng-options="u.name for u in users | filter:{dept:개발팀}">
</select>

5. 비활성화 옵션

<!-- disable when 조건 -->
<select ng-model="selected"
        ng-options="u.name disable when u.inactive for u in users">
</select>

ng-options vs ng-repeat 비교

구분ng-optionsng-repeat
성능우수 (최적화됨)상대적 느림
객체 바인딩지원문자열만
빈 옵션별도 추가 필요함께 작성
track by지원지원

주의사항

  • ng-model 필수 - 없으면 동작하지 않음
  • 초기값 설정시 참조 일치 필요
  • track by로 성능 최적화 가능