Wie man eine ausgewählte Option eines Dropdown-Listen-Steuerelements unter Verwendung von angular JS einstellt

Ich verwende Angular JS und ich muss eine ausgewählte Option eines Dropdown-Listen-Steuerelements mit angular JS festlegen. Verzeih mir, wenn das lächerlich ist, aber ich bin neu mit Angular JS

Hier ist das Dropdown-Listen-Steuerelement meines HTML

 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}">  

Nachdem es bevölkert ist, bekomme ich

    set of 6 traits 5 complete sets  

Wie kann ich das Steuerelement für value="0" einstellen?

Ich hoffe, ich verstehe Ihre Frage, aber die ng-model Direktive erstellt eine item.selectedVariant Bindung zwischen dem ausgewählten Element im Steuerelement und dem Wert von item.selectedVariant . Das bedeutet, dass das Ändern von item.selectedVariant in JavaScript oder das Ändern des Werts im Steuerelement das andere aktualisiert. Wenn item.selectedVariant Wert 0 hat, sollte dieses Element ausgewählt werden.

Wenn variants ein Array von Objekten ist, muss item.selectedVariant auf eines dieser Objekte gesetzt werden. Ich weiß nicht, welche Informationen Sie in Ihrem Bereich haben, aber hier ist ein Beispiel:

JS:

 $scope.options = [{ name: "a", id: 1 }, { name: "b", id: 2 }]; $scope.selectedOption = $scope.options[1]; 

HTML:

  

Dies würde den “b” -Eintrag belassen, der ausgewählt werden soll.

Ich weiß nicht, ob das irgendjemandem hilft oder nicht, aber da ich mit dem gleichen Problem konfrontiert war, dachte ich darüber nach, wie ich die Lösung bekommen habe.

Sie können Track-by- Attribut in Ihren ng-options .

Angenommen, Sie haben:

 variants:[{'id':0, name:'set of 6 traits'}, {'id':1, name:'5 complete sets'}] 

Sie können Ihre ng-options wie ng-options :

 ng-options="v.name for v in variants track by v.id" 

Hoffe, das hilft jemandem in Zukunft.

Wenn Sie item.selectedVariant den Wert 0 item.selectedVariant , sollte es automatisch ausgewählt werden. Sehen Sie sich das Beispiel auf http://docs.angularjs.org/api/ng.directive an: $scope.color='red' Sie aus, welches standardmäßig die rote Farbe auswählt, indem Sie $scope.color='red' .

Ich sehe hier schon gute Antworten geschrieben, aber manchmal kann es auch hilfreich sein, das gleiche in anderer Form zu schreiben

 

Es kann nützlich sein. Bindungen dosieren nicht immer.

  

Beispielsweise. Sie füllen das Optionslisten-Quellmodell aus Rest-Service. Der ausgewählte Wert war vor dem Füllen der Liste bekannt und wurde festgelegt. Nach dem Ausführen von Rest-Anfrage mit $ http Liste Option durchgeführt werden. Aber die ausgewählte Option ist nicht festgelegt. Aus unbekannten Gründen wird AngularJS in shadow $ digest nicht ausgewählt, wie es sein soll. Ich muss JQuery verwenden, um ausgewählt zu setzen. Es ist wichtig! Eckig im Schatten fügen Sie dem Wert von Attr “Wert” Präfix hinzu, das von ng-Wiederholungsoptos erzeugt wird. Für int ist es “Nummer:”.

 $scope.issue.productId = productId; function activate() { $http.get('/product/list') .then(function (response) { $scope.products = response.data; if (productId) { console.log("" + $("#product option").length);//for clarity $timeout(function () { console.log("" + $("#product option").length);//for clarity $('#product').val('number:'+productId); //$scope.issue.productId = productId;//not work at all }, 200); } }); } 

Einfacher Weg

Wenn Sie eine Benutzer als Antwort oder ein Array / JSON haben, die Sie definiert haben, müssen Sie zuerst den ausgewählten Wert im Controller festlegen und dann den gleichen Modellnamen in html eingeben. Dieses Beispiel habe ich geschrieben, um es auf einfachste Weise zu erklären.
Einfaches Beispiel
Innerhalb des Controllers:

 $scope.Users = ["Suresh","Mahesh","Ramesh"]; $scope.selectedUser = $scope.Users[0]; 

Dein HTML

  

komplexes Beispiel
Innerhalb des Controllers:

 $scope.JSON = { "ResponseObject": [{ "Name": "Suresh", "userID": 1 }, { "Name": "Mahesh", "userID": 2 }] }; $scope.selectedUser = $scope.JSON.ResponseObject[0]; 

Dein HTML

  

You selected: {{selectedUser.Name}}

Versuche Folgendes:

JS-Datei

 this.options = { languages: [{language: 'English', lg:'en'}, {language:'German', lg:'de'}] }; console.log(signinDetails.language); 

HTML-Datei