Como definir uma opção selecionada de um controle de lista suspensa usando JS angular

Estou usando JS angular e preciso definir uma opção selecionada de um controle de lista suspensa usando JS angular. Perdoe-me se isso é ridículo, mas eu sou novo no Angular JS

Aqui está o controle da lista suspensa do meu 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>

Depois de preenchido, recebo

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

Como posso definir o controle para value="0"ser selecionado?

Espero entender sua pergunta, mas a ng-modeldiretiva cria uma ligação bidirecional entre o item selecionado no controle e o valor de item.selectedVariant. Isso significa que alterar o item.selectedVariantJavaScript ou alterar o valor no controle atualiza o outro. Se item.selectedVarianttiver um valor igual a 0, esse item deve ser selecionado.

Se variantsé uma matriz de objetos, item.selectedVariantdeve ser definido como um desses objetos. Não sei quais informações você tem no seu escopo, mas aqui está um exemplo:

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>

Isso deixaria o item "b" a ser selecionado.

Não sei se isso vai ajudar alguém ou não, mas como eu estava enfrentando o mesmo problema, pensei em compartilhar como obtive a solução.

Você pode usar a faixa por atributo em seung-options .

Suponha que você tenha:

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

Você pode mencionar o seu ng-optionscomo:

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

Espero que isso ajude alguém no futuro.

Se você atribuir o valor 0 a item.selectedVariantele, ele deve ser selecionado automaticamente. Confira a amostra em http://docs.angularjs.org/api/ng.directive:select, que seleciona a cor vermelha por padrão simplesmente atribuindo $scope.color='red'.

vejo aqui já escrevi boas respostas, mas em algum momento escrever o mesmo de outra forma pode ser útil

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

Maneira simples

Se você tiver um Usuário como resposta ou um Array / JSON que você definiu, primeiro você precisa definir o valor selecionado no controlador e, em seguida, colocar o mesmo nome do modelo em html. Este exemplo que escrevi para explicar da maneira mais fácil.
Exemplo simples
Inside Controller:

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

O seu HTML

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

Exemplo complexo
Inside Controller:

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

O seu HTML

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

Pode ser útil. Dose de ligações nem sempre funciona.

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

Por exemplo. Você preenche o modelo de origem da lista de opções do serviço de descanso. O valor selecionado era conhecido antes da lista de preenchimento e foi definido. Após executar a solicitação de descanso com a opção $ http list, faça-se. Mas a opção selecionada não está definida. Por razões desconhecidas, o AngularJS na execução shadow $ digest não vincula a seleção selecionada como deve ser. Eu tenho que usar JQuery para definir selecionado. É importante! Angular na sombra adiciona prefixo ao valor de attr "value" gerado por optinos ng-repeat. Para int é "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);
       }
   });
}

Tente o seguinte:

Arquivo JS

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

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

Este é o código que eu usei para o valor selecionado definido

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>

tente isso em uma estrutura angular

JS:

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