Eine Sache, die zu beachten ist, ist, dass ngModel erforderlich damit ngOptions funktioniert... beachten Sie die ng-model="blah" was bedeutet: "setze $scope.blah auf den ausgewählten Wert".
Versuchen Sie dies:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Hier ist mehr aus der AngularJS-Dokumentation (falls Sie sie noch nicht gesehen haben):
für Array-Datenquellen:
- Bezeichnung für Wert in Array
- als Bezeichnung für Wert in Array wählen
- Etikett Gruppe nach Gruppe fo = select as label group by group für Wert in array
für Objektdatenquellen:
- label for (Schlüssel , Wert) in object
- select as label für (Schlüssel , Wert) in object
- label group by group for (Schlüssel, Wert) in object
- select as label group by group for (Schlüssel, Wert) in object
Zur Erläuterung der Werte von Optionstags in AngularJS:
Wenn Sie ng-options , die Werte von Options-Tags, die von ng-options ausgegeben werden, sind immer der Index des Array-Elements, auf das sich das Options-Tag bezieht . Das liegt daran, dass AngularJS die Auswahl ganzer Objekte mit Auswahlsteuerelementen ermöglicht, und nicht nur primitiver 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 der obigen Funktion können Sie ein ganzes Objekt in $scope.selectedItem direkt. Der Punkt ist, dass Sie sich mit AngularJS nicht darum kümmern müssen, was in Ihrem Option-Tag steht. Lassen Sie AngularJS das erledigen; Sie sollten sich nur darum kümmern, was in Ihrem Modell in Ihrem Bereich ist.
Hier ist ein Plunker, der das oben beschriebene Verhalten demonstriert und den HTML-Code anzeigt
Umgang mit der Standardoption:
Es gibt ein paar Dinge, die ich oben nicht erwähnt habe, die sich auf die Standardoption beziehen.
Wählen Sie die erste Option und entfernen Sie die leere Option:
Sie können dies tun, indem Sie eine einfache ng-init die das Modell (von ng-model ) auf das erste Element der Elemente, die Sie in 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 ein wenig verrückt werden, wenn foo zufällig richtig auf etwas "Falsches" initialisiert wird. In diesem Fall müssen Sie die Initialisierung von foo in Ihrem Controller, höchstwahrscheinlich.
Anpassen der Standardoption:
Hier müssen Sie lediglich ein Optionstag als untergeordnetes Element Ihres Select-Tags mit einem leeren value-Attribut 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" bestehen, auch wenn Sie eine andere Option auswählen. Dies ist nicht der Fall für das Standardverhalten von Selects unter AngularJS.
Eine benutzerdefinierte Standardoption, die nach dem Treffen einer Auswahl ausgeblendet wird:
Wenn Sie möchten, dass Ihre angepasste Standardoption verschwindet, nachdem Sie einen Wert ausgewählt haben, können Sie ein ng-hide-Attribut zu Ihrer Standardoption 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>
