Comment définir une option sélectionnée d'un contrôle de liste déroulante à l'aide de 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 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é?

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.

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.

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

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>

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>    

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);
       }
   });
}

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>

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

JS:

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