Należy zauważyć, że ngModel jest wymagany do działania ngOptions ... zwróć uwagę nang-model="blah" to, że „ustaw $ scope.blah na wybraną wartość”.
Spróbuj tego:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Oto więcej z dokumentacji AngularJS (jeśli jeszcze go nie widziałeś):
dla źródeł danych tablicowych:
- etykieta wartości w tablicy
- wybierz jako etykietę wartości w tablicy
- etykieta grupa po grupie dla wartości w tablicy = wybierz jako etykieta grupa po grupie dla wartości w tablicy
dla źródeł danych obiektowych:
- etykieta dla (klucz, wartość) w obiekcie
- wybierz jako etykietę dla (klucz, wartość) w obiekcie
- etykieta grupa po grupie dla (klucz, wartość) w obiekcie
- wybierz jako grupę etykiet po grupie dla (klucz, wartość) w obiekcie
W celu wyjaśnienia wartości tagów opcji w AngularJS:
Gdy używasz ng-options, wartości tagów opcji wypisanych przez ng-options zawsze będą indeksem elementu tablicy, do którego odnosi się tag opcji . Wynika to z faktu, że AngularJS pozwala na zaznaczanie całych obiektów za pomocą kontrolek wyboru, a nie tylko typów pierwotnych. Na przykład:
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>
Powyższe pozwoli ci wybrać $scope.selectedItembezpośrednio cały obiekt . Chodzi o to, że dzięki AngularJS nie musisz się martwić o to, co jest w tagu opcji. Niech AngularJS sobie z tym poradzi; powinieneś dbać tylko o to, co jest w twoim modelu w twoim zakresie.
Oto plunker demonstrujący powyższe zachowanie i pokazujący napisany HTML
Postępowanie z opcją domyślną:
Jest kilka rzeczy, o których nie wspomniałem powyżej, odnoszących się do opcji domyślnej.
Wybieranie pierwszej opcji i usuwanie pustej opcji:
Możesz to zrobić, dodając prosty element, ng-initktóry ustawia model (od ng-model) do pierwszego elementu w elementach, w których się powtarzasz ng-options:
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
Uwaga: Może to być trochę szalone, jeśli foozdarzy się, że zostanie poprawnie zainicjowane na coś „falsy”. W takim przypadku będziesz chciał obsłużyć inicjalizacjęfoo najprawdopodobniej w kontrolerze.
Dostosowywanie opcji domyślnej:
To jest trochę inne; tutaj wszystko, co musisz zrobić, to dodać tag opcji jako wybrany element podrzędny z pustym atrybutem wartości, a następnie dostosować jego tekst wewnętrzny:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
Uwaga: w tym przypadku opcja „pusta” pozostanie tam nawet po wybraniu innej opcji. Nie dotyczy to domyślnego zachowania selekcji w AngularJS.
Dostosowana domyślna opcja, która ukrywa się po dokonaniu wyboru:
Jeśli chcesz, aby niestandardowa opcja domyślna zniknęła po wybraniu wartości, możesz dodać atrybut ng-hide do opcji domyślnej:
<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>