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

si vous voulez vous assurer que votre valeur $scope.somethingHere ne soit pas écrasée lorsque votre vue initialise, vous voudrez coalesce ( 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>

essayez ceci:

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, alors changez l'attribut ng-options en

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.

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 la façon d'utiliser track by dans sélectionner ng-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 la portée angulaire, et il a id propriété avec la même valeur que tout id de tout city sur la liste cities , il sera automatiquement sélectionné en charge.

Voici Plunker pour ceci: 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

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

 <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 voulez remplacer la liste des chaînes par la liste des objets, vous allez simplement changer ceci en

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

où quelque chose est un objet avec le nom des propriétés et l'id, bien sûr. Veuillez noter que "as" n'est pas utilisé de cette façon pour exprimer les options ng, parce qu'il ne définissez la valeur et vous ne serez pas en mesure de le changer lorsque vous utilisez la piste des

Les accepté de répondre à l'utilisation ng-init , mais document , dit pour éviter ng-init si possible.

la seule utilisation appropriée de ngInit est pour le repliement des propriétés spéciales de ngRepeat, comme vu dans la démo ci-dessous. En plus de cette affaire, vous devriez utilisez des controllers plutôt que ngInit pour initialiser les valeurs sur un scope.

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, $impair, $, même pour faire ce travail sans codage.

$first est l'un des ng-repeat propriétés spéciales.

  <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 quand vous savez ce que 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. par exemple, je l'utilise pour l'achèvement automatique qui exige de choisir le premier article tout le temps.

ma solution pour cela était d'utiliser html pour hardcode mon option par défaut. Comme ceci:

in 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. Excuse aussi mon haml. Je sais que ce n'est pas une réponse directe à la question de L'OP, mais les gens trouvent cela sur Google. Espérons que cela aide quelqu'un d'autre.

utilisez le code ci-dessous pour remplir 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>

selon le nombre d'options que vous avez, vous pouvez mettre vos valeurs dans un tableau et auto-peupler vos options comme ceci

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

dans mon cas, je devais insérer une valeur initiale seulement pour dire à l'utilisateur de choisir une option, donc, je fais comme le code ci-dessous:

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

Quand j'ai essayé une option avec la valeur != d'une chaîne vide (null) l'option a été substituée par angular, mais, lorsqu'on place une option comme celle-ci (avec valeur nulle), l'option select apear avec cette option.

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

utilisant select avec ngOptions et définissant une valeur par défaut:

Voir la ngOptions documentation pour plus d' ngOptions des exemples d'utilisation.

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 HTML SELECT élément angulaire de la liaison de données.

Liaison select à un non-valeur de chaîne par l'intermédiaire de ngModel analyse / mise en forme:

(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

ça a marché pour moi.

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

Dans mon cas, car la valeur par défaut varie d'un cas à l'autre dans 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 quand angulaire remplit définit l'option avec la valeur sélectionnée.

 .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()

})

vient de traduire ceci de coffescript sur la mouche au moins le fond de celui-ci est correct si ce n'est la chose de trou.

ce n'est pas la façon la plus simple mais faites-le quand la valeur varie

en réponse à 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-à-dire,

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

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

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

Je réglerais le modèle dans le contrôleur. Puis le sélectionner par défaut cette valeur. Ex: html:

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

Régulateur angulaire (utilisant une 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
  }
});

si vous utilisez ng-options pour vous faire tomber de option ayant la même valeur que de ng-modal est par défaut sélectionné. Prenons l'exemple suivant:

<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 de list.key et selectedItem , est sélectionnée par défaut.

Ce travail pour moi

ng-selected="true" 

si vous avez quelque chose au lieu de juste dans la partie date, vous pouvez utiliser ng-init() en le déclarant dans votre controller, et l'utiliser dans le haut de votre HTML. Cette fonction fonctionnera comme un constructeur pour votre controller, et vous pourrez y initier vos variables.

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>

je pense que la façon la plus facile est

 ng-selected="$first"

j'avais besoin de la valeur par défaut" Please Select " pour être indélébile. J'avais aussi besoin de pouvoir conditionnellement définir une option sélectionnée par défaut.

j'ai réalisé ceci la manière suivante simpliste: Code JS: // Retournez ces 2 pour tester la valeur par défaut sélectionnée ou aucune valeur par défaut avec le texte "Please Select" //$portée.defaultOption = 0; $portée.defaultOption = { key: '3', value: '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 aidera quelqu'un d'autre qui a des exigences similaires.

le "Veuillez sélectionner" a été accompli par la réponse de Joffrey Outtier ici .

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

essayez ceci dans votre contrôleur angulaire...

$somethingHere = {nom: "quelque Chose de Cool"};

vous pouvez définir une valeur, mais vous utilisez un type complexe et l'angle de recherche clé/valeur à définir dans votre vue.

Et, si ne fonctionne pas, essayez ceci : ng-options= " option.value as option.nom de l'option dans options piste par option.nom "

Le Meilleur et le plus Simple(mise à Jour)