Cómo establecer 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 JS angular. Perdóname si esto es ridículo, pero soy nuevo con Angular JS

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

Después de que se llene, obtengo

    set of 6 traits 5 complete sets  

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

Espero que entienda su pregunta, pero la directiva ng-model crea una vinculación bidireccional entre el elemento seleccionado en el control y el valor de item.selectedVariant . Esto significa que al cambiar item.selectedVariant en JavaScript, o al cambiar el valor en el control, se actualiza el otro. Si item.selectedVariant tiene un valor de 0 , ese elemento debe ser seleccionado.

Si variants es una matriz de objetos, item.selectedVariant debe establecer en uno de esos objetos. No sé qué información tiene en su scope, pero aquí hay un ejemplo:

JS:

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

HTML:

  

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 seguimiento por atributo en sus ng-options .

Suponga que tiene:

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

Puede mencionar sus ng-options como:

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

Espero que esto ayude a alguien en el futuro.

Si asigna un valor de 0 a 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 se escribieron buenas respuestas, pero en algún momento escribir lo mismo en otra forma puede ser útil

 

Puede ser útil. Las ataduras no siempre funcionan.

  

Por ejemplo. Completas el modelo de fuente de la lista de opciones del servicio de descanso. El valor seleccionado se conocía antes de la lista de llenado y se configuró. Después de ejecutar la solicitud de reposo con la opción $ http list, finalice. Pero la opción seleccionada no está configurada. Por razones desconocidas, AngularJS en shadow $ digest ejecutando no enlaza seleccionado como shuold be. Tengo que usar JQuery para establecer seleccionado. ¡Es importante! Angular en la sombra agrega prefijo al valor de attr “valor” generado por ng-repeat optinos. 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); } }); } 

Manera simple

Si tiene una respuesta como 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
Controlador interno:

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

Tu HTML

  

ejemplo complejo
Controlador interno:

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

Tu HTML

  

You selected: {{selectedUser.Name}}

Pruebe lo siguiente:

Archivo JS

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

Archivo HTML

 
    Intereting Posts