Comment avoir une option par défaut dans une boîte de sélection - Angular.js

Question

J'ai fait des recherches sur Google et je n'ai rien trouvé à 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 celles-ci

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

Et le résultat 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 la valeur par défaut afin d'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>

Answer 1

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>

Answer 2

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

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

Answer 3

Essayez ç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, modifiez l'attribut ng-options à l'attribut

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

et le Javascript à

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

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

Answer 4

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

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

Cette façon de faire est meilleure parce que lorsque vous voulez remplacer la liste de chaînes de caractères par une liste d'objets, il vous suffit de changer cette valeur en

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

où somethingHere est un objet avec les propriétés name et id, bien sûr. Veuillez noter que le paramètre 'as' n'est pas utilisé dans cette façon d'exprimer les options ng, car il ne fera que définir la valeur et vous ne pourrez pas la modifier lorsque vous utiliserez track by

Answer 5

Ma solution à ce problème a été d'utiliser le html pour coder en dur mon option par défaut. Comme ça :

Dans 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 & 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. Veuillez également excuser mon haml. Je sais que ce n'est pas directement une réponse à la question de l'OP, mais les gens trouvent cela sur Google. J'espère que cela aidera quelqu'un d'autre.