본문 바로가기

AngularJS

10. <select> 요소 사용법

◈ <select> 요소 사용법

<select ng-model="문자열" name="문자열" ng-options="별도의 표현식" ng-required="true/false">

 - ng-model : 바인딩 대상이 되는 모델명

 - name : 폼에서 사용할 이름

 - ng-required : 필수 입력 여부

 - ng-options : 옵션을 나타내기 위한 별도의 표현식

 - 배열 데이터일 때

 label for value in array

 select as label for value in array

 label group by group for value in array

 select as label group by group for value in array

 - 객체 데이터일 때

 label for (key, value) in object

 select as label for (key, value) in object

 label group by group for (key, value) in object

 select as label group by group for (key, value) in object


 - AngularJS에서 제공하는 ng-options 지시자는 위에서 본 바와 같이 ng-repeat 처럼 반복적인 데이터를 위한 별도의 표현식을 제공한다.

~for ~in이 기본 구조이고 as 혹은 group by를 같이 사용한다.


◈ ng-options 지시자에 사용하는 표현식을 구성하는 요소 설명

 array/object : $scope에 있는 배열 또는 객체에 접근하는 표현식

 value : 배열 요소를 가리키는 내부변수 생성 표현식

 label : <option>요소의 라벵리 될 표현식 (예 : value.propertyName)

 select : 부모인 <select) 요소에 모델로 바인딩되는 표현식, select가 없을 떄에는 value의 값이 기본적으로 select의 값이 된다.

 group : <optgroup> 요소가 되는 표현식


예제 )