Comment définir une option sélectionnée d'un contrôle de liste déroulante à l'aide de JS angulaire


139

J'utilise Angular JS et je dois définir une option sélectionnée d'un contrôle de liste déroulante à l'aide de angular JS. Pardonnez-moi si c'est ridicule mais je suis nouveau avec Angular JS

Voici le contrôle de la liste déroulante de mon 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>

Après qu'il soit peuplé, je reçois

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

Comment puis-je configurer le contrôle pour value="0"être sélectionné?


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

Réponses:


191

J'espère comprendre votre question, mais la ng-modeldirective crée une liaison bidirectionnelle entre l'élément sélectionné dans le contrôle et la valeur de item.selectedVariant. Cela signifie que changer item.selectedVariantdans JavaScript, ou changer la valeur dans le contrôle, met à jour l'autre. Si item.selectedVarianta une valeur de 0, cet élément doit être sélectionné.

Si variantsest un tableau d'objets, item.selectedVariantdoit être défini sur l'un de ces objets. Je ne sais pas quelles informations vous avez dans votre champ d'application, mais voici un exemple:

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>

Cela laisserait l'élément «b» à sélectionner.


J'ai un fichier de contrôle nommé order.js, donc le nom html est le même order.html où se trouve le contrôle. Dois-je définir le selectedVariant ici ou directement sur le contrôle?
themhz

Habituellement, vous définissez ces éléments dans le contrôleur, sur la $scopevariable. Donc, en supposant que vous êtes dans une seule portée, dans votre contrôleur, vous pourriez dire $scope.item.selectedVariant = 0, pour définir la valeur sélectionnée par défaut. Vous pouvez également définir la variable directement sur le contrôle, en HTML, en utilisant la directive ng-init , mais cela devient assez compliqué à mon avis!
Steve Klösters

Pourriez-vous nous expliquer ce qui variantsest sur votre portée? Vous devrez définir item.selectedVariantexactement un élément de variants.
Steve Klösters

$ scope.item.selectedVariant = 0; cela va casser la page si je le mets dans le fichier du contrôleur
themhz

pouvez-vous fournir la syntaxe en utilisant ng-init s'il vous plaît?
themhz

34

Je ne sais pas si cela aidera quelqu'un ou non, mais comme j'étais confronté au même problème, j'ai pensé à partager comment j'avais trouvé la solution.

Vous pouvez utiliser piste par attribut dans votreng-options .

Supposons que vous ayez:

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

Vous pouvez mentionner votre ng-optionscomme:

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

J'espère que cela aidera quelqu'un à l'avenir.


Oui! enfin! Merci
davaus

Génial. Je manquais la piste pour faire cela de manière dynamique.
John

Finalement! Mon problème a été résolu en mettant la piste par. Merci
Kishan

C'est ce qui me manquait! J'étais en train de définir le champ de portée qui était lié ngModelcorrectement, mais cela n'a pas fonctionné jusqu'à ce que j'ai ajouté le track by! Je vous remercie!
Cindy K.

7

Si vous lui attribuez la valeur 0, item.selectedVariantil doit être sélectionné automatiquement. Découvrez un exemple sur http://docs.angularjs.org/api/ng.directive:select qui sélectionne la couleur rouge par défaut en attribuant simplement $scope.color='red'.


où dois-je définir l'élément .selectedVariant? si je définis $ scope.item.selectedVariant = 0; dans le contrôleur du fichier, angulaire se rompt
themhz

3
pourriez-vous également coller le code HTML correspondant?
Tadeusz Wójcik

Je pense que chaque élément dans orderGrid doit avoir sélectionnéVariant mis à 0
Tadeusz Wójcik

pouvez-vous fournir un exemple de code? Je ne suis pas familier avec angular sorry
themhz

7

Je vois ici déjà écrit de bonnes réponses, mais parfois écrire la même chose sous une autre forme peut être utile

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

Et si j'avais une liste déroulante à sélection multiple. Définir simplement les identifiants dans le modèle ne fonctionne pas
Nikhil Sahu

2

Manière simple

Si vous avez un Users comme réponse ou un Array / JSON que vous avez défini, vous devez d'abord définir la valeur sélectionnée dans le contrôleur, puis vous mettez le même nom de modèle en html. Cet exemple que j'ai écrit pour expliquer de la manière la plus simple.
Exemple simple à l'
intérieur du contrôleur:

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

Votre HTML

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

exemple complexe
Inside Controller:

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

Votre HTML

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

1

Cela peut être utile. Les fixations ne fonctionnent pas toujours.

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

Par exemple. Vous remplissez le modèle source de la liste d'options à partir de rest-service. La valeur sélectionnée était connue avant de remplir la liste et a été définie. Après avoir exécuté la demande de repos avec l'option $ http list, faites-le. Mais l'option sélectionnée n'est pas définie. Pour des raisons inconnues, AngularJS dans shadow $ digest ne s'exécutant pas sélectionné comme il devrait l'être. Je dois utiliser JQuery pour définir la sélection. C'est important! Angular in shadow ajoute un préfixe à la valeur de attr "value" pour généré par ng-repeat optinos. Pour int, c'est "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);
       }
   });
}

0

Essayez ce qui suit:

Fichier JS

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

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

Il existe déjà une bonne solution, qui fonctionne et qui a été acceptée par OP qu'elle résout son problème.
L. Guthardt

0

C'est le code que j'ai utilisé pour la valeur sélectionnée

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>

essayez ceci sur un cadre angulaire


0

JS:

$scope.options = [
  {
    name: "a", 
    id: 1 
  },
  {
    name: "b",
    id: 2 
  }
];
$scope.selectedOption = $scope.options[1];
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.