Come impostare un'opzione selezionata di un controllo elenco a discesa utilizzando JS angolare

Sto utilizzando Angular JS e devo impostare un'opzione selezionata di un controllo elenco a discesa utilizzando JS angolare. Perdonami se questo è ridicolo ma sono nuovo con Angular JS

Ecco il controllo dell'elenco a discesa del mio 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>

Dopo che viene popolato ottengo

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

Come posso impostare il controllo per value="0"essere selezionato?

Spero di capire la tua domanda, ma la ng-modeldirettiva crea un'associazione a due vie tra l'elemento selezionato nel controllo e il valore di item.selectedVariant. Ciò significa che la modifica item.selectedVariantin JavaScript o la modifica del valore nel controllo aggiorna l'altro. Se item.selectedVariantha un valore di 0, quell'elemento dovrebbe essere selezionato.

Se variantsè un array di oggetti, item.selectedVariantdeve essere impostato su uno di quegli oggetti. Non so quali informazioni hai nel tuo ambito, ma ecco un esempio:

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>

Ciò lascerebbe l'elemento "b" da selezionare.

Non so se questo possa aiutare qualcuno o no, ma dato che stavo affrontando lo stesso problema, ho pensato di condividere come ho ottenuto la soluzione.

Puoi utilizzare la traccia per attributo nel tuo ng-options.

Supponi di avere:

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

Puoi menzionare il tuo ng-optionscome:

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

Spero che questo aiuti qualcuno in futuro.

Se si assegna un valore 0 item.selectedVariant, dovrebbe essere selezionato automaticamente. Guarda l'esempio su http://docs.angularjs.org/api/ng.directive:select che seleziona il colore rosso per impostazione predefinita semplicemente assegnando $scope.color='red'.

vedo che qui ho già scritto buone risposte, ma a volte scrivere lo stesso in altra forma può essere utile

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

Modo semplice

Se si dispone di un utente come risposta o di un array / JSON definiti, innanzitutto è necessario impostare il valore selezionato nel controller, quindi inserire lo stesso nome del modello in html. Questo esempio l'ho scritto per spiegare nel modo più semplice.
Esempio semplice
Inside Controller:

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

Il tuo HTML

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

esempio complesso
Inside Controller:

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

Il tuo HTML

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

Può essere utile. La dose di associazione non funziona sempre.

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

Per esempio. Compilare il modello di origine dell'elenco opzioni dal servizio di ristoro. Il valore selezionato era noto prima dell'elenco di riempimento ed è stato impostato. Dopo aver eseguito la richiesta di riposo con l'opzione dell'elenco $ http, fare. Ma l'opzione selezionata non è impostata. Per ragioni sconosciute, AngularJS nell'esecuzione $ shadow digest non vincola la selezione come deve essere. Devo usare JQuery per impostare la selezione. È importante! Angular in shadow aggiunge il prefisso al valore di attr "value" generato da opt-ng-repeat. Per int è "numero:".

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

Prova quanto segue:

File JS

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

File HTML

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

Questo è il codice che ho usato per il valore selezionato impostato

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>

prova questo su una struttura angolare

JS:

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