Cómo configurar una opción seleccionada de un control de lista desplegable usando JS angular

Estoy usando Angular JS y necesito establecer una opción seleccionada de un control de lista desplegable usando angular JS. Perdóname si esto es ridículo pero soy nuevo con Angular JS

Aquí está el control de la lista desplegable de mi 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>

Después de que se llena, me sale

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

¿Cómo puedo configurar el control para value="0"ser seleccionado?

Espero entender su pregunta, pero la ng-modeldirectiva crea un enlace bidireccional entre el elemento seleccionado en el control y el valor de item.selectedVariant. Esto significa que cambiar item.selectedVariantJavaScript o cambiar el valor en el control actualiza el otro. Si item.selectedVarianttiene un valor de 0, ese elemento debe seleccionarse.

Si variantses una matriz de objetos, item.selectedVariantdebe establecerse en uno de esos objetos. No sé qué información tiene en su alcance, pero aquí hay un ejemplo:

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>

Esto dejaría el elemento "b" para ser seleccionado.

No sé si esto ayudará a alguien o no, pero como estaba enfrentando el mismo problema, pensé en compartir cómo obtuve la solución.

Puede usar el seguimiento por atributo en su ng-options.

Suponga que tiene:

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

Puedes mencionar tu ng-optionscomo:

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

Espero que esto ayude a alguien en el futuro.

Si le asigna el valor 0 item.selectedVariant, debe seleccionarse automáticamente. Consulte la muestra en http://docs.angularjs.org/api/ng.directive:select que selecciona el color rojo de forma predeterminada simplemente asignando $scope.color='red'.

Veo que aquí ya escribí buenas respuestas, pero en algún momento escribir lo mismo en otra forma puede 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>

Manera simple

Si tiene una respuesta de Usuarios o una Matriz / JSON que definió, Primero debe establecer el valor seleccionado en el controlador, luego debe poner el mismo nombre de modelo en html. Este ejemplo lo escribí para explicarlo de la manera más fácil.
Ejemplo simple
dentro del controlador:

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

Su HTML

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

ejemplo complejo
dentro del controlador:

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

Su HTML

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

Puede ser útil Las fijaciones de dosis no siempre funcionan.

<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 ejemplo. Rellena el modelo de origen de la lista de opciones desde rest-service. El valor seleccionado se conocía antes de completar la lista y se estableció. Después de ejecutar la solicitud de reposo con la opción $ http list se debe hacer Pero la opción seleccionada no está configurada. Por razones desconocidas, AngularJS en shadow $ digest ejecutando no enlaza seleccionado como debe ser. Tengo que usar JQuery para configurar seleccionado. Es importante! Angular en sombra agrega el prefijo al valor de attr "value" para generar optinos ng-repeat. Para int es "número:".

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

Intenta lo siguiente:

Archivo JS

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

Archivo 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 es el código que usé para el valor seleccionado

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>

intente esto en un marco angular

JS:

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