Eine Sache zu beachten ist, dass ngModel erforderlich ist , damit ngOptions funktioniert ... Beachten Sie das, ng-model="blah"was sagt "setze $ scope.blah auf den ausgewählten Wert".
Versuche dies:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Hier ist mehr aus der Dokumentation von AngularJS (falls Sie es nicht gesehen haben):
für Array-Datenquellen:
- Beschriftung für Wert im Array
- Wählen Sie als Bezeichnung für den Wert im Array
- Beschriftung Gruppe für Gruppe für Wert im Array = Auswahl als Beschriftung Gruppe für Gruppe für Wert im Array
für Objektdatenquellen:
- Beschriftung für (Schlüssel, Wert) im Objekt
- Wählen Sie als Bezeichnung für (Schlüssel, Wert) im Objekt
- Beschriftung Gruppe für Gruppe für (Schlüssel, Wert) im Objekt
- Wählen Sie als Bezeichnung Gruppe für Gruppe für (Schlüssel, Wert) im Objekt
Zur Verdeutlichung der Options-Tag-Werte in AngularJS:
Wenn Sie verwenden ng-options, sind die Werte von Options-Tags, die von ng-options geschrieben wurden, immer der Index des Array-Elements, auf das sich das Options-Tag bezieht . Dies liegt daran, dass Sie mit AngularJS tatsächlich ganze Objekte mit ausgewählten Steuerelementen auswählen können und nicht nur primitive Typen. Zum Beispiel:
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>
Mit dem obigen Befehl können Sie ein gesamtes Objekt $scope.selectedItemdirekt auswählen . Der Punkt ist, dass Sie sich mit AngularJS keine Gedanken darüber machen müssen, was in Ihrem Options-Tag enthalten ist. Lassen Sie AngularJS damit umgehen; Sie sollten sich nur darum kümmern, was in Ihrem Modell in Ihrem Bereich enthalten ist.
Hier ist ein Plunker, der das obige Verhalten demonstriert und den ausgeschriebenen HTML-Code zeigt
Umgang mit der Standardoption:
Es gibt einige Dinge, die ich oben in Bezug auf die Standardoption nicht erwähnt habe.
Auswahl der ersten Option und Entfernen der leeren Option:
Sie können dies tun, indem Sie ein einfaches hinzufügen ng-init, das das Modell (von ng-model) auf das erste Element in den Elementen setzt, in denen Sie sich wiederholen ng-options:
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
Hinweis: Dies könnte etwas verrückt werden, wenn fooes richtig auf etwas "Falsches" initialisiert wird. In diesem Fall möchten Sie foohöchstwahrscheinlich die Initialisierung in Ihrem Controller durchführen.
Anpassen der Standardoption:
Das ist etwas anders; Hier müssen Sie lediglich ein Options-Tag als untergeordnetes Element Ihrer Auswahl mit einem leeren Wertattribut hinzufügen und dann den inneren Text anpassen:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
Hinweis: In diesem Fall bleibt die Option "leer" auch nach Auswahl einer anderen Option erhalten. Dies ist nicht der Fall für das Standardverhalten von Auswahlen unter AngularJS.
Eine benutzerdefinierte Standardoption, die ausgeblendet wird, nachdem eine Auswahl getroffen wurde:
Wenn Sie möchten, dass Ihre angepasste Standardoption nach Auswahl eines Werts nicht mehr angezeigt wird, können Sie Ihrer Standardoption ein ng-hide-Attribut hinzufügen:
<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>