web-dev-qa-db-fra.com

Comment avoir une option par défaut dans la case à cocher Angular.js

J'ai effectué une recherche sur Google et je ne trouve rien à ce sujet.

J'ai ce code.

<select ng-model="somethingHere" 
        ng-options="option.value as option.name for option in options"
></select>

Avec des données comme celle-ci 

options = [{
   name: 'Something Cool',
   value: 'something-cool-value'
}, {
   name: 'Something Else',
   value: 'something-else-value'
}];

Et la sortie est quelque chose comme ça.

<select ng-model="somethingHere"  
        ng-options="option.value as option.name for option in options" 
        class="ng-pristine ng-valid">

    <option value="?" selected="selected"></option>
    <option value="0">Something Cool</option>
    <option value="1">Something Else</option>
</select>

Comment est-il possible de définir la première option dans les données comme valeur par défaut pour obtenir un résultat comme celui-ci.

<select ng-model="somethingHere" ....>
    <option value="0" selected="selected">Something Cool</option>
    <option value="1">Something Else</option>
</select>
javascriptangularjshtml-select
291
iConnor

Vous pouvez simplement utiliser ng-init comme ceci

<select ng-init="somethingHere = options[0]" 
        ng-model="somethingHere" 
        ng-options="option.name for option in options">
</select>
350
zsong

Si vous voulez vous assurer que votre valeur $scope.somethingHere ne sera pas écrasée lors de l'initialisation de votre vue, vous voudrez fusionner (somethingHere = somethingHere || options[0].value) la valeur dans votre ng-init comme suit:

<select ng-model="somethingHere" 
        ng-init="somethingHere = somethingHere || options[0].value"
        ng-options="option.value as option.name for option in options">
</select>
227
Ben Lesh

Essaye ça:

HTML

<select 
    ng-model="selectedOption" 
    ng-options="option.name for option in options">
</select>

Javascript

function Ctrl($scope) {
    $scope.options = [
        {
          name: 'Something Cool',
          value: 'something-cool-value'
        }, 
        {
          name: 'Something Else',
          value: 'something-else-value'
        }
    ];

    $scope.selectedOption = $scope.options[0];
}

Plunker ici .

Si vous voulez vraiment définir la valeur qui sera liée au modèle, remplacez l'attribut ng-options par

ng-options="option.value as option.name for option in options"

et le Javascript pour

...
$scope.selectedOption = $scope.options[0].value;

Un autre Plunker ici compte tenu de ce qui précède.

68
Michael Benford

Un seul réponse de Srivathsa Harish Venkataramana mentionné track by qui est en effet une solution pour cela!

Voici un exemple avec Plunker (lien ci-dessous) de l'utilisation de track by dans selectng-options:

<select ng-model="selectedCity"
        ng-options="city as city.name for city in cities track by city.id">
  <option value="">-- Select City --</option>
</select>

Si selectedCity est défini sur l'étendue angulaire et qu'il a la propriété id avec la même valeur que toute id de toute city de la liste cities, elle sera automatiquement sélectionnée au chargement.

Voici Plunker pour cela: http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

Voir la documentation source pour plus de détails: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select

36
mik-t

Je pense que, après l'inclusion de 'track by', vous pouvez l'utiliser dans ng-options pour obtenir ce que vous vouliez, comme suit

 <select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" ></select>

Cette façon de faire est préférable car lorsque vous souhaitez remplacer la liste de chaînes par une liste d’objets, vous devez simplement changer ceci. 

 <select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>

où quelque chose est un objet avec les propriétés name et id, bien sûr. Veuillez noter que 'as' n'est pas utilisé de cette manière pour exprimer les options-ng, car il ne fera que définir la valeur et vous ne pourrez pas le modifier lorsque vous utilisez le suivi

33
Srivathsa Harish Venkataramana

La réponse acceptée utilise ng-init, mais document dit d'éviter si possible ng-init. 

La seule utilisation appropriée de ngInit concerne l'aliasing de propriétés spéciales de ngRepeat, comme vu dans la démo ci-dessous. Outre ce cas, vous devriez utilisez les contrôleurs plutôt que ngInit pour initialiser les valeurs sur une étendue.

Vous pouvez également utiliser ng-repeat au lieu de ng-options pour vos options. Avec ng-repeat, vous pouvez utiliser ng-selected avec ng-repeat propriétés spéciales. c'est-à-dire $ index, $ odd, $ même pour que cela fonctionne sans codage. 

$first est l’une des propriétés spéciales de ng-repeat.

  <select ng-model="foo">
    <option ng-selected="$first" ng-repeat="(id,value) in myOptions" value="{{id}}">
      {{value}}
    </option>
  </select>

---------------------- MODIFIER ----------------
Bien que cela fonctionne, je préférerais la réponse de @ mik-t lorsque vous savez quelle valeur sélectionner, https://stackoverflow.com/a/29564802/454252 , qui utilise track-by et ng-options sans utiliser ng-init ou ng-repeat.

Cette réponse ne doit être utilisée que lorsque vous devez sélectionner le premier élément sans savoir quelle valeur choisir. Je l'utilise par exemple pour l'achèvement automatique, ce qui nécessite de choisir le PREMIER élément à tout moment.

22
allenhwkim

Ma solution à cela était d'utiliser HTML pour coder en dur mon option par défaut. Ainsi:

En HAML:

%select{'ng-model' => 'province', 'ng-options' => "province as province for province in summary.provinces", 'chosen' => "chosen-select", 'data-placeholder' => "BC & ON"}
  %option{:value => "", :selected => "selected"}
    BC &amp; ON

En HTML:

<select ng-model="province" ng-options="province as province for province in summary.provinces" chosen="chosen-select" data-placeholder="BC & ON">
  <option value="" selected="selected">BC &amp; ON</option>
</select>

Je veux que mon option par défaut renvoie toutes les valeurs de mon API, c'est pourquoi j'ai une valeur vide. Excusez aussi mon haml. Je sais que ce n'est pas directement une réponse à la question du PO, mais les gens le trouvent sur Google. J'espère que ceci aide quelqu'un d'autre.

16
penner

Utilisez le code ci-dessous pour renseigner l'option sélectionnée dans votre modèle.

<select id="roomForListing" ng-model="selectedRoom.roomName" >

<option ng-repeat="room in roomList" title="{{room.roomName}}" ng-selected="{{room.roomName == selectedRoom.roomName}}" value="{{room.roomName}}">{{room.roomName}}</option>

</select>
14
Jayen Chondigara

Dans mon cas, il me fallait insérer une valeur initiale uniquement pour indiquer à l'utilisateur de sélectionner une option, j'aime bien le code ci-dessous:

<select ...
    <option value="" ng-selected="selected">Select one option</option>
</select>

Lorsque j'ai essayé une option avec la valeur! = D'une chaîne vide (null), l'option a été remplacée par angular, mais lorsque vous avez placé une option comme celle-ci (avec une valeur null), la sélection a été sélectionnée avec cette option.

Désolé par mon mauvais anglais et j'espère que je l'aide dans quelque chose avec cela.

10
Maciel Bombonato

Selon le nombre d'options que vous avez, vous pouvez placer vos valeurs dans un tableau et les renseigner automatiquement

<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
   <option value="">Pick a Number</option>
</select>
10
Alex Hawkins

Utiliser select avec ngOptions et définir une valeur par défaut:

Reportez-vous à la documentation ngOptions pour plus d'exemples d'utilisation de ngOptions.

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ],
    selectedOption: {id: '2', name: 'Option B'} //This sets the default value of the select in the ui
    };
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>

plnkr.co

Documentation officielle à propos de l'élément HTML SELECT avec liaison de données angulaire.

Liaison de select à une valeur autre que de chaîne via ngModel à analyser/formater:

(function(angular) {
  'use strict';
angular.module('nonStringSelect', [])
  .run(function($rootScope) {
    $rootScope.model = { id: 2 };
  })
  .directive('convertToNumber', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        ngModel.$parsers.Push(function(val) {
          return parseInt(val, 10);
        });
        ngModel.$formatters.Push(function(val) {
          return '' + val;
        });
      }
    };
  });
})(window.angular);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<body ng-app="nonStringSelect">
  <select ng-model="model.id" convert-to-number>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
{{ model }}
</body>

plnkr.co

Autre exemple:

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.availableOptions = [
     { name: 'Apple', value: 'Apple' }, 
     { name: 'Banana', value: 'banana' }, 
     { name: 'Kiwi', value: 'kiwi' }
   ];
   $scope.data = {selectedOption : $scope.availableOptions[1].value};
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <select ng-model="data.selectedOption" required ng-options="option.value as option.name for option in availableOptions"></select>
  </form>  
  </div>
</body>

jsfiddle

8
shilovk

Cela a fonctionné pour moi.

<select ng-model="somethingHere" ng-init="somethingHere='Cool'">
    <option value="Cool">Something Cool</option>
    <option value="Else">Something Else</option>
</select>
4
Bishan

En réponse à la réponse de Ben Lesh , il devrait y avoir cette ligne

ng-init="somethingHere = somethingHere || options[0]"

au lieu de

ng-init="somethingHere = somethingHere || options[0].value"

C'est,

<select ng-model="somethingHere"
        ng-init="somethingHere = somethingHere || options[0]"
        ng-options="option.name for option in options track by option.value">
</select>

3
Li Tianjiang

Dans mon cas puisque la valeur par défaut varie d’un cas à l’autre sous la forme ..__, j’ajoute un attribut personnalisé dans la balise select.

 <select setSeletected="{{data.value}}">
      <option value="value1"> value1....
      <option value="value2"> value2....
       ......

dans les directives, j'ai créé un script qui vérifie la valeur et, lorsque angular le remplit, définit l'option avec cette valeur sur selected.

 .directive('setSelected', function(){
    restrict: 'A',
    link: (scope, element, attrs){
     function setSel=(){
     //test if the value is defined if not try again if so run the command
       if (typeof attrs.setSelected=='undefined'){             
         window.setTimeout( function(){setSel()},300) 
       }else{
         element.find('[value="'+attrs.setSelected+'"]').prop('selected',true);          
       }
     }
    }

  setSel()

}) 

je viens de traduire cela à partir de coffescript à la volée. Au moins, le jist de celui-ci est correct, sinon le trou.

Ce n'est pas le moyen le plus simple, mais faites-le quand la valeur varie

3
Bruno

Utilisez simplement ng-selected="true" comme suit:

<select ng-model="myModel">
        <option value="a" ng-selected="true">A</option>
        <option value="b">B</option>
</select>
3
Shevon Silva

Je définirais le modèle dans le contrôleur. Ensuite, la sélection passera par défaut à cette valeur. Ex: Html:

<select ng-options="..." ng-model="selectedItem">

Contrôleur angulaire (en utilisant la ressource):

myResource.items(function(items){
  $scope.items=items;
  if(items.length>0){
     $scope.selectedItem= items[0];
//if you want the first. Could be from config whatever
  }
});
2
Jens Alenius

Si vous utilisez ng-options pour vous rendre dans le menu déroulant, option ayant la même valeur que celle de ng-modal est sélectionné par défaut . Prenons l'exemple:

<select ng-options="list.key as list.name for list in lists track by list.id" ng-model="selectedItem">

Donc, l'option ayant la même valeur que list.key et selectedItem est sélectionnée par défaut.

1
Rubi saini

Si vous avez quelque chose au lieu d'initier simplement la partie date, vous pouvez utiliser ng-init() en le déclarant dans votre contrôleur, et l'utiliser en haut de votre code HTML . Cette fonction fonctionnera comme un constructeur pour votre contrôleur, et vous peut initier vos variables là-bas.

angular.module('myApp', [])
 .controller('myController', ['$scope', ($scope) => {
   $scope.allOptions = [
     { name: 'Apple', value: 'Apple' }, 
     { name: 'Banana', value: 'banana' }
   ];
   $scope.myInit = () => {
      $scope.userSelected = 'Apple'
      // Other initiations can goes here..
   }
}]);


<body ng-app="myApp">
  <div ng-controller="myController" ng-init="init()">
    <select ng-model="userSelected" ng-options="option.value as option.name for option in allOptions"></select>
   </div>
</body>
1
ofir_aghai

Cela fonctionne pour moi

ng-selected="true"
1
I don't know

essayez ceci dans votre contrôleur angulaire ...

$ quelque choseHere = {name: 'Quelque chose de cool'};

Vous pouvez définir une valeur, mais vous utilisez un type complexe et l’angle cherchera clé/valeur à définir dans votre vue.

Et, si cela ne fonctionne pas, essayez ceci:

0
Wesley Rocha

J'avais besoin de la valeur par défaut «Please Select» pour être non sélectionnable. Je devais également pouvoir définir de manière conditionnelle une option sélectionnée par défaut. 

J'ai réalisé ceci de la manière simpliste suivante: Code JS: // Retournez ces 2 pour tester les valeurs par défaut sélectionnées ou aucune valeur par défaut avec le texte par défaut «Veuillez sélectionner». //$scope.defaultOption = 0; $ scope.defaultOption = {clé: '3', valeur: 'Option 3'};

$scope.options = [
   { key: '1', value: 'Option 1' },
   { key: '2', value: 'Option 2' },
   { key: '3', value: 'Option 3' },
   { key: '4', value: 'Option 4' }
];

getOptions();

function getOptions(){
    if ($scope.defaultOption != 0)
    { $scope.options.selectedOption = $scope.defaultOption; }
}

HTML:

<select name="OptionSelect" id="OptionSelect" ng-model="options.selectedOption" ng-options="item.value for item in options track by item.key">
<option value="" disabled selected style="display: none;"> -- Please Select -- </option>
</select>
<h1>You selected: {{options.selectedOption.key}}</h1>

J'espère que cela aide quelqu'un d'autre qui a des exigences similaires.

Le "Please Select" a été accompli par la réponse de Joffrey Outtier ici . 

0
Spencer Sullivan
    <!--
    Using following solution you can set initial 
default value at controller as well as after change option selected value shown as default.
    -->
    <script type="text/javascript">
      function myCtrl($scope)
        {
          //...
            $scope.myModel=Initial Default Value; //set default value as required
          //..
        }
    </script>
    <select ng-model="myModel" 
                ng-init="myModel= myModel"
                ng-options="option.value as option.name for option in options">
        </select>
0
Mohammad Rahman