ngOptions, how to use repeat object in select.

Select, option tag를 이용하는 경우, select의 option의 value는 object를 설정할 수 없고, 단순 string 만 가능합니다.

이 때문에, ng-model에 object를 설정하여 사용하기에 어려움이 있는데요.

이는 현재 angularJs의 spec이 object를 지원하지 않기 때문입니다.

이를 해결하기 위해서는 단순 string을 바인딩 하거나,

Select > ng-model, option > ng-repeat 조합을 사용하지 않고,

Select > ng-model / ng-options 조합을 사용하면 됩니다.

예를 들어 선택목록의 구조가 [{Id: 1, name: ‘Male’}, {Id: 2, name: ‘Female’}] 이고, name을 display하되 ng-model로 {Id, name} 을 가지는 개체을 바인딩 하려면

<select ng-model=”selectedValue” ng-options=”value.name for value in values”></select>

라는 형태로 사용하시면 됩니다.

자세한 내용은 아래의 link를 참조하시기 바랍니다.

감사합니다.

Reference

https://docs.angularjs.org/api/ng/directive/ngOptions