angularjs - select angular 6

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

Question

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

 <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 llene, obtengo

 <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" para ser seleccionado?

Answer 1

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

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

ejemplo complejo
Controlador interno:

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

Tu HTML

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

Puede ser útil. Las ataduras 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. 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);
}
});
}

Answer 6

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

Answer 7

Veo que aquí ya se escribieron 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>

Answer 8

<select ng-model="selectedDevice" size="7" single>
<option *ngFor="let opt of devices" [value]="opt.Address">{{opt.Name}}</option>