So legen Sie eine ausgewählte Option eines Dropdown-Listensteuerelements mit eckigem JS fest

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 &amp;&amp; item.quantity &gt; 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 ?

Ich hoffe, ich verstehe Ihre Frage, aber die ng-modelDirektive schafft eine wechselseitige Bindung zwischen dem ausgewählten Element im Steuerelement und dem Wert von item.selectedVariant. Dies bedeutet, dass durch Ändern item.selectedVariantin JavaScript oder Ändern des Werts im Steuerelement der andere aktualisiert wird. Wenn item.selectedVariantder Wert " 0ist", sollte dieses Element ausgewählt werden.

Wenn variantses sich um ein Array von Objekten handelt, item.selectedVariantmuss eines dieser Objekte festgelegt 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:

<select data-ng-options="o.name for o in options" data-ng-model="selectedOption"></select>

Dies würde das Element "b" zur Auswahl lassen.

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:

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

Sie können Ihre ng-optionsals erwähnen :

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

Hoffe das hilft jemandem in Zukunft.

Wenn Sie ihm den Wert 0 zuweisen, item.selectedVariantsollte 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'.

Ich sehe hier bereits gute Antworten geschrieben, aber manchmal kann es hilfreich sein, dasselbe in anderer Form zu schreiben

<div ng-app ng-controller="MyCtrl">
  <select ng-model="referral.organization" ng-options="c for c in organizations"></select>
</div>

<script type='text/javascript'>
  function MyCtrl($scope) {
    $scope.organizations = ['a', 'b', 'c', 'd', 'e'];
    $scope.referral = {
      organization: $scope.organizations[2]
    };
  }
</script>

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:

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

Ihr HTML

<select data-ng-options="usr for usr in Users" data-ng-model="selectedUser">
</select>

komplexes Beispiel
Inside Controller:

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

Ihr HTML

<select data-ng-options="usr.Name for usr in JSON.ResponseObject" data-ng-model="selectedUser"></select>
<h3>You selected: {{selectedUser.Name}}</h3>    

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

<select id="product" class="form-control" name="product" required
        ng-model="issue.productId"
        ng-change="getProductVersions()"
        ng-options="p.id as p.shortName for p in products">
</select>

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:".

$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);
       }
   });
}

Versuche Folgendes:

JS-Datei

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

HTML-Datei

<div class="form-group col-sm-6">
    <label>Preferred language</label>
    <select class="form-control" name="right" ng-model="signinDetails.language" ng-init="signinDetails.language = options.languages[0]" ng-options="l as l.language for l in options.languages"><option></option>
    </select>
</div>

Dies ist der Code, den ich für den eingestellten ausgewählten Wert verwendet habe

countryList: any = [{ "value": "AF", "group": "A", "text": "Afghanistan"}, { "value": "AL", "group": "A", "text": "Albania"}, { "value": "DZ", "group": "A", "text": "Algeria"}, { "value": "AD", "group": "A", "text": "Andorra"}, { "value": "AO", "group": "A", "text": "Angola"}, { "value": "AR", "group": "A", "text": "Argentina"}, { "value": "AM", "group": "A", "text": "Armenia"}, { "value": "AW", "group": "A", "text": "Aruba"}, { "value": "AU", "group": "A", "text": "Australia"}, { "value": "AT", "group": "A", "text": "Austria"}, { "value": "AZ", "group": "A", "text": "Azerbaijan"}];
 
 
 for (var j = 0; j < countryList.length; j++) {
      //debugger
      if (countryList[j].text == "Australia") {
          console.log(countryList[j].text); 
          countryList[j].isSelected = 'selected';
      }
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<label>Country</label>
<select class="custom-select col-12" id="Country" name="Country"   >
<option value="0" selected>Choose...</option>
<option *ngFor="let country of countryList" value="{{country.text}}" selected="{{country.isSelected}}"   > {{country.text}}</option>
</select>

Versuchen Sie dies auf einem eckigen Rahmen

JS:

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