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

139

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?

themhz
fuente
55
<option value="0" ng-selected="true">set of 6 traits</option>
Muhammad Shahzad

Respuestas:

191

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.

Steve Klösters
fuente
Tengo un archivo controler llamado order.js, por lo tanto, el nombre html es el mismo order.html donde está el control. ¿Debo establecer el Variante seleccionado allí o directamente en el control?
themhz
Por lo general, establecería estas cosas en el controlador, en la $scopevariable. Entonces, suponiendo que esté en un solo alcance, en su controlador, podría decir $scope.item.selectedVariant = 0, para establecer el valor seleccionado predeterminado. También puede establecer la variable directamente en el control, en HTML, utilizando la directiva ng-init , ¡pero en mi opinión, eso se vuelve bastante complicado!
Steve Klösters
¿Podría dar más detalles variantssobre su alcance? Tendría que establecer item.selectedVariantexactamente un elemento de variants.
Steve Klösters
$ scope.item.selectedVariant = 0; esto romperá la página si la pongo en el archivo controler
themhz
¿Puedes proporcionar la sintaxis usando ng-init por favor?
themhz
34

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.

jsmtslch
fuente
¡Si! ¡finalmente! Gracias
davaus
Excelente. Me faltaba la pista para poder hacer esto dinámicamente.
John
¡Finalmente! Mi problema se resolvió haciendo un seguimiento. Gracias
Kishan
¡Esto es lo que me faltaba! Yo estaba sentado el campo alcance que fue obligado a ngModelcorrectamente, pero no funcionó hasta que he añadido el track by! ¡Gracias!
Cindy K.
7

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

Tadeusz Wójcik
fuente
¿Dónde configuro el item.selectedVariant? si defino $ scope.item.selectedVariant = 0; en el controlador del archivo, angular se rompe
themhz
3
¿también podrías pegar html a juego?
Tadeusz Wójcik
Creo que cada elemento en orderGrid debe haber seleccionado Variable establecida en 0
Tadeusz Wójcik
¿Puedes proporcionar un código de muestra? No estoy familiarizado con angular lo siento
themhz
7

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>
Arthur Tsidkilov
fuente
¿Qué pasaría si tuviera un menú desplegable que fuera de selección múltiple? Simplemente configurar los identificadores en el modelo no funciona
Nikhil Sahu
2

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>    
shreedhar bhat
fuente
1

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);
       }
   });
}
Trueboroda
fuente
0

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>
Asha Joshi
fuente
Ya existe una buena solución, que funciona y ha sido aceptada por OP que resuelve su problema.
L. Guthardt el
0

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

Dinesh Nisshanka
fuente
0

JS:

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