Ich habe in anderen Beiträgen darüber gelesen, aber ich konnte es nicht herausfinden.
Ich habe ein Array,
$scope.items = [
{ID: '000001', Title: 'Chicago'},
{ID: '000002', Title: 'New York'},
{ID: '000003', Title: 'Washington'},
];
Ich möchte es als rendern:
<select>
<option value="000001">Chicago</option>
<option value="000002">New York</option>
<option value="000003">Washington</option>
</select>
Und ich möchte auch die Option mit der ID=000002 auswählen.
Ich habe select gelesen und ausprobiert, aber ich werde nicht schlau daraus.
Eine Sache zu beachten ist, dass ngModel ist erforderlich für ngOptions zu arbeiten... beachten Sie die ng-model="blah"
, die sagt "setzen $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's mehr von AngularJS's Dokumentation (wenn Sie's nicht gesehen haben):
für Array-Datenquellen:
- Label für Wert in Array
- select as label für den Wert im Array
- label group by group für Wert in Array = select as label group by group für Wert in Array
für Objektdatenquellen:
- label für (Schlüssel , Wert) in Objekt
- select as label für (Schlüssel, Wert) in Objekt
- label gruppe nach gruppe für (schlüssel, wert) in objekt
- select as label group by group für (Schlüssel, Wert) in object
Zur Erläuterung der Werte von Options-Tags in AngularJS:
Wenn Sie "ng-options" verwenden, sind die Werte von Options-Tags, die von ng-options ausgegeben werden, immer der Index des Array-Elements, auf das sich das Options-Tag bezieht. Das liegt daran, dass AngularJS es erlaubt, ganze Objekte mit Select-Controls auszuwählen, 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 Beispiel können Sie ein ganzes Objekt direkt in $scope.selectedItem
auswählen. Der Punkt ist, mit AngularJS müssen Sie sich nicht darum kümmern, was in Ihrem Option-Tag steht. Überlassen Sie das AngularJS; Sie sollten sich nur darum kümmern, was in Ihrem Model in Ihrem Scope ist.
Hier ist ein Plunker, der das obige Verhalten demonstriert und den HTML-Code zeigt
Der Umgang mit der Standardoption:
Es gibt ein paar Dinge, die ich oben im Zusammenhang mit der Standardoption nicht erwähnt habe.
Auswahl der ersten Option und Entfernen der leeren Option:
Sie können dies tun, indem Sie ein einfaches "ng-init" hinzufügen, das das Modell (aus "ng-model") auf das erste Element in den Elementen setzt, die Sie in "ng-options" wiederholen:
<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 auf etwas "Falsches" initialisiert wird. In diesem Fall müssen Sie die Initialisierung von "foo" wahrscheinlich in Ihrem Controller behandeln.
Anpassen der Standardoption:
Dies ist ein wenig anders; hier müssen Sie lediglich ein Option-Tag als untergeordnetes Element des Select-Tags hinzufügen, mit einem leeren value-Attribut, 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" erhalten, auch wenn Sie eine andere Option auswählen. Dies ist nicht der Fall für das Standardverhalten von Selects unter AngularJS.
Eine angepasste Standardoption, die nach 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>
I'm Lernen AngularJS und wurde mit der Auswahl als gut kämpfen. Ich weiß, diese Frage ist bereits beantwortet, aber ich wollte einige weitere Code dennoch teilen.
In meinem Test habe ich zwei Listboxen: Automarken und Automodelle. Die Liste der Modelle ist deaktiviert, bis eine Marke ausgewählt wird. Wenn die Auswahl in der Marken-Listbox später zurückgesetzt wird (auf 'Marke auswählen'), dann wird die Modelle-Listbox wieder deaktiviert UND ihre Auswahl wird ebenfalls zurückgesetzt (auf 'Modell auswählen'). Marken werden als Ressource abgerufen, während Modelle nur hart kodiert sind.
[
{"code": "0", "name": "Select Make"},
{"code": "1", "name": "Acura"},
{"code": "2", "name": "Audi"}
]
angular.module('makeServices', ['ngResource']).
factory('Make', function($resource){
return $resource('makes.json', {}, {
query: {method:'GET', isArray:true}
});
});
<div ng:controller="MakeModelCtrl">
<div>Make</div>
<select id="makeListBox"
ng-model="make.selected"
ng-options="make.code as make.name for make in makes"
ng-change="makeChanged(make.selected)">
</select>
<div>Model</div>
<select id="modelListBox"
ng-disabled="makeNotSelected"
ng-model="model.selected"
ng-options="model.code as model.name for model in models">
</select>
</div>
function MakeModelCtrl($scope)
{
$scope.makeNotSelected = true;
$scope.make = {selected: "0"};
$scope.makes = Make.query({}, function (makes) {
$scope.make = {selected: makes[0].code};
});
$scope.makeChanged = function(selectedMakeCode) {
$scope.makeNotSelected = !selectedMakeCode;
if ($scope.makeNotSelected)
{
$scope.model = {selected: "0"};
}
};
$scope.models = [
{code:"0", name:"Select Model"},
{code:"1", name:"Model1"},
{code:"2", name:"Model2"}
];
$scope.model = {selected: "0"};
}
In CoffeeScript:
#directive
app.directive('select2', ->
templateUrl: 'partials/select.html'
restrict: 'E'
transclude: 1
replace: 1
scope:
options: '='
model: '='
link: (scope, el, atr)->
el.bind 'change', ->
console.log this.value
scope.model = parseInt(this.value)
console.log scope
scope.$apply()
)
<!-- HTML partial -->
<select>
<option ng-repeat='o in options'
value='{{$index}}' ng-bind='o'></option>
</select>
<!-- HTML usage -->
<select2 options='mnuOffline' model='offlinePage.toggle' ></select2>
<!-- Conclusion -->
<p>Sometimes it's much easier to create your own directive...</p>