ngOptions가 작동 하려면 ngModel이 필요 하다는 점에 주목 해야 합니다. ng-model="blah""set $ scope.blah를 선택된 값으로 설정합니다."
이 시도:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
AngularJS의 문서에서 더 많은 내용을 볼 수 있습니다 (보지 못한 경우).
배열 데이터 소스의 경우 :
- 배열의 값 레이블
- 배열의 값 레이블로 선택
- 배열의 값에 대한 그룹 별 레이블 그룹 = 배열의 값에 대한 그룹 별 레이블 그룹으로 선택
객체 데이터 소스의 경우 :
- 객체에서 (key, value)에 대한 레이블
- 객체에서 (key, value) 레이블로 선택
- 객체의 (키, 값)에 대한 그룹 별 레이블 그룹화
- 객체의 (키, 값)에 대해 그룹별로 레이블 그룹으로 선택
AngularJS의 옵션 태그 값에 대한 설명은 다음과 같습니다.
당신이 사용하는 경우 ng-options, 옵션 태그의 값은 항상 옵션 태그에 관한 배열 항목의 인덱스가됩니다 겨-옵션에 의해 작성 . AngularJS는 실제로 기본 유형뿐만 아니라 선택 컨트롤을 사용하여 전체 객체를 선택할 수 있기 때문입니다. 예를 들면 다음과 같습니다.
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }
];
});
<div ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
<pre>{{selectedItem | json}}</pre>
</div>
위의 방법으로 전체 객체를 $scope.selectedItem직접 선택할 수 있습니다. 요점은 AngularJS를 사용하면 옵션 태그에 무엇이 있는지 걱정할 필요가 없다는 것입니다. AngularJS가 처리하도록하십시오. 스코프의 모델에있는 것만 신경 써야합니다.
위의 동작을 보여주고 작성된 HTML을 보여주는 플런저입니다.
기본 옵션 다루기 :
기본 옵션과 관련하여 위에서 언급하지 않은 몇 가지가 있습니다.
첫 번째 옵션을 선택하고 빈 옵션을 제거하십시오.
ng-init모델을 (에서 ng-model) 반복하는 항목의 첫 번째 요소로 설정 하는 단순 을 추가하여이를 수행 할 수 있습니다 ng-options.
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
참고 : foo"거짓"으로 올바르게 초기화 되면 약간 미친 듯이 보일 수 있습니다. 이 경우 foo컨트롤러에서 초기화를 처리하고 싶을 것입니다.
기본 옵션 사용자 정의 :
이것은 조금 다릅니다. 여기서 빈 태그 속성으로 옵션 태그를 선택 항목의 하위 항목으로 추가하고 내부 텍스트를 사용자 정의하기 만하면됩니다.
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
참고 :이 경우 다른 옵션을 선택한 후에도 "빈"옵션이 그대로 유지됩니다. AngularJS에서 selects의 기본 동작에는 해당되지 않습니다.
선택 후 숨겨지는 사용자 정의 된 기본 옵션 :
값을 선택한 후 사용자 정의 된 기본 옵션을 제거하려면 ng-hide 속성을 기본 옵션에 추가 할 수 있습니다.
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="" ng-if="foo">Select something to remove me.</option>
</select>