web-dev-qa-db-fra.com

Comment définir une option de contrôle de liste déroulante avec JS angulaire

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 JS angulaire. Pardonne-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 il est 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 définir le contrôle pour que value="0" soit sélectionné?

angularjsdrop-down-menuangular-ngmodelselected
132
themis

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

Si variants est un tableau d'objets, item.selectedVariant doit être défini sur l'un de ces objets. Je ne sais pas quelles informations vous avez dans votre champ, 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.

185
Steve Klösters

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

Vous pouvez utiliser track by attribute dans votre ng-options. 

Supposons que vous avez:

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

Vous pouvez mentionner votre ng-options comme:

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

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

30
jsmtslch

Si vous attribuez la valeur 0 à item.selectedVariant, il doit être sélectionné automatiquement . Extrait de l'exemple sur http://docs.angularjs.org/api/ng.directive:select qui sélectionne la couleur rouge par défaut en affectant simplement $scope.color='red'.

7
Tadeusz Wójcik

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

Cela peut être utile. Les dosages 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 liste d'options à partir de rest-service. La valeur sélectionnée était connue avant la liste de remplissage et a été définie. Après avoir exécuté rest-request 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 n’exécutant pas la liaison comme il se doit. Je dois utiliser JQuery pour définir sélectionné. C'est important! Angular in shadow ajoute le préfixe à la valeur attr "valeur" générée par les optinos ng-repeat. Pour int c'est "numéro:".

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

Moyen simple

Si vous avez une réponse Users 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 inscrivez le même nom de modèle en HTML. Cet exemple, j'ai écrit pour expliquer de la manière la plus simple.
Exemple simple
Contrôleur intérieur:

$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
Contrôleur intérieur:

$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
shreedhar bhat

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>
0
Asha Joshi