Ich verwende Angular JS und muss eine ausgewählte Option eines Dropdown-Listensteuerelements mit Angular JS festlegen. Vergib mir, wenn das lächerlich ist, aber ich bin neu bei Angular JS
Hier ist die Dropdown-Listensteuerung meines HTML
<select ng-required="item.id==8 && item.quantity > 0" name="posterVariants"
ng-show="item.id==8" ng-model="item.selectedVariant"
ng-change="calculateServicesSubTotal(item)"
ng-options="v.name for v in variants | filter:{type:2}">
</select>
Nachdem es besiedelt ist, bekomme ich
<select ng-options="v.name for v in variants | filter:{type:2}" ng-change="calculateServicesSubTotal(item)"
ng-model="item.selectedVariant" ng-show="item.id==8" name="posterVariants"
ng-required="item.id==8 && item.quantity > 0" class="ng-pristine ng-valid ng-valid-required">
<option value="?" selected="selected"></option>
<option value="0">set of 6 traits</option>
<option value="1">5 complete sets</option>
</select>
Wie kann ich das Steuerelement für value="0"
die Auswahl einstellen ?
<option value="0" ng-selected="true">set of 6 traits</option>
Antworten:
Ich hoffe, ich verstehe Ihre Frage, aber die
ng-model
Direktive schafft eine wechselseitige Bindung zwischen dem ausgewählten Element im Steuerelement und dem Wert vonitem.selectedVariant
. Dies bedeutet, dass durch Ändernitem.selectedVariant
in JavaScript oder Ändern des Werts im Steuerelement der andere aktualisiert wird. Wennitem.selectedVariant
der Wert "0
ist", sollte dieses Element ausgewählt werden.Wenn
variants
es sich um ein Array von Objekten handelt,item.selectedVariant
muss eines dieser Objekte festgelegt werden. Ich weiß nicht, welche Informationen Sie in Ihrem Bereich haben, aber hier ist ein Beispiel:JS:
HTML:
Dies würde das Element "b" zur Auswahl lassen.
quelle
$scope
Variable setzen. Wenn Sie sich also in einem einzigen Bereich befinden, können Sie in Ihrem Controller sagen$scope.item.selectedVariant = 0
, dass Sie den ausgewählten Standardwert festlegen. Sie können die Variable auch direkt auf dem Steuerelement in HTML mithilfe der ng-init- Direktive festlegen , aber das wird meiner Meinung nach ziemlich chaotisch!variants
in Ihrem Anwendungsbereich liegt? Sie müsstenitem.selectedVariant
genau auf einen Artikel von einstellenvariants
.Ich weiß nicht, ob dies irgendjemandem helfen wird oder nicht, aber da ich vor dem gleichen Problem stand, dachte ich darüber nach, zu teilen, wie ich zu der Lösung gekommen bin.
Sie können track by attribute in Ihrem verwenden
ng-options
.Angenommen, Sie haben:
Sie können Ihre
ng-options
als erwähnen :Hoffe das hilft jemandem in Zukunft.
quelle
ngModel
richtig gebunden war , aber es hat nicht funktioniert, bis ich dastrack by
! Danke dir!Wenn Sie ihm den Wert 0 zuweisen,
item.selectedVariant
sollte dieser automatisch ausgewählt werden. Schauen Sie sich das Beispiel unter http://docs.angularjs.org/api/ng.directive:select an, bei dem standardmäßig die rote Farbe durch einfaches Zuweisen ausgewählt wird$scope.color='red'
.quelle
Ich sehe hier bereits gute Antworten geschrieben, aber manchmal kann es hilfreich sein, dasselbe in anderer Form zu schreiben
quelle
Einfacher Weg
Wenn Sie einen Benutzer als Antwort oder ein von Ihnen definiertes Array / JSON haben, müssen Sie zuerst den ausgewählten Wert im Controller festlegen und dann denselben Modellnamen in HTML eingeben. Dieses Beispiel habe ich geschrieben, um es auf einfachste Weise zu erklären.
Einfaches Beispiel
Inside Controller:
Ihr HTML
komplexes Beispiel
Inside Controller:
Ihr HTML
quelle
Es kann nützlich sein. Bindungen funktionieren nicht immer.
Beispielsweise. Sie füllen das Quellmodell der Optionsliste aus dem Rest-Service. Der ausgewählte Wert war vor dem Füllen der Liste bekannt und wurde eingestellt. Nach dem Ausführen der Rest-Anfrage mit $ http Liste Option durchgeführt werden. Die ausgewählte Option ist jedoch nicht festgelegt. Aus unbekannten Gründen wird AngularJS in Shadow $ Digest ausgeführt und nicht so ausgewählt, wie es sein soll. Ich muss JQuery verwenden, um die Auswahl festzulegen. Es ist wichtig! Winkel im Schatten Präfix zum Wert von attr "Wert" für durch ng-repeat Optinos erzeugte hinzufügen. Für int ist es "number:".
quelle
Versuche Folgendes:
JS-Datei
HTML-Datei
quelle
Dies ist der Code, den ich für den eingestellten ausgewählten Wert verwendet habe
Versuchen Sie dies auf einem eckigen Rahmen
quelle
JS:
quelle