Come avere un'opzione predefinita nella casella di selezione Angular.js

Ho cercato Google e non riesco a trovare nulla al riguardo.

Ho questo codice

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

Con alcuni dati come questo

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

E l'output è qualcosa del genere.

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

Come è possibile impostare la prima opzione nei dati come valore predefinito in modo da ottenere un risultato come questo.

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

Puoi semplicemente usare ng-init in questo modo

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

Se vuoi assicurarti che il tuo $scope.somethingHerevalore non venga sovrascritto quando la vista viene inizializzata, ti consigliamo di unire ( somethingHere = somethingHere || options[0].value) il valore nel tuo ng-init in questo modo:

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

Prova questo:

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

Se si desidera veramente impostare il valore che sarà associato al modello, modificare l' ng-optionsattributo in

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

e Javascript per

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

Un altro Plunker qui considerando quanto sopra.

Ha menzionato solo una risposta di Srivathsa Harish Venkataramanatrack by che è davvero una soluzione per questo!

Ecco un esempio insieme a Plunker (link sotto) di come utilizzare track byin select 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>

Se selectedCityè definita in ambito angolare, e ha idproprietà con lo stesso valore di una qualsiasi iddi qualsiasi citysulla citieslista, sarà automaticamente selezionata sul carico.

Ecco Plunker per questo: http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

Vedere la documentazione di origine per maggiori dettagli: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select

Penso che, dopo l'inclusione di 'track by', puoi usarlo in ng-options per ottenere quello che volevi, come il seguente

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

Questo modo di farlo è migliore perché quando si desidera sostituire l'elenco di stringhe con un elenco di oggetti, lo si cambierà in

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

dove SometHHere è un oggetto con il nome e l'id delle proprietà, ovviamente. Si noti che 'as' non viene utilizzato in questo modo per esprimere le opzioni ng, poiché imposterà solo il valore e non sarà possibile modificarlo quando si utilizza track by

La risposta accettata usa ng-init, ma il documento dice di evitare ng-init se possibile.

L'unico uso appropriato di ngInit è per l'alias delle proprietà speciali di ngRepeat, come mostrato nella demo di seguito. Oltre a questo caso, è necessario utilizzare i controller anziché ngInit per inizializzare i valori su un ambito.

Puoi anche usare ng-repeat invece che ng-optionsper le tue opzioni. Con ng-repeat, è possibile utilizzare ng-selectedcon ng-repeatproprietà speciali. vale a dire $ index, $ odd, $ even per farlo funzionare senza alcuna codifica.

$first è una delle proprietà speciali di ng-repeat.

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

---------------------- MODIFICA ----------------
Anche se funziona, preferirei @ mik-t rispondi quando sai quale valore selezionare, https://stackoverflow.com/a/29564802/454252 , che utilizzatrack-by e ng-optionssenza utilizzare ng-inito ng-repeat.

Questa risposta deve essere utilizzata solo quando è necessario selezionare il primo elemento senza sapere quale valore scegliere. ad esempio, lo sto usando per il completamento automatico che richiede di scegliere sempre il PRIMO elemento.

La mia soluzione a questo era usare HTML per hardcode la mia opzione predefinita. Così:

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

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

Voglio che la mia opzione predefinita restituisca tutti i valori dalla mia API, ecco perché ho un valore vuoto. Scusa anche il mio haml. So che questa non è direttamente una risposta alla domanda del PO, ma la gente lo trova su Google. Spero che questo aiuti qualcun altro.

Usa il codice qui sotto per popolare l'opzione selezionata dal tuo modello.

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

A seconda di quante opzioni hai, potresti mettere i tuoi valori in un array e popolare automaticamente le tue opzioni in questo modo

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

Nel mio caso, dovevo inserire un valore iniziale solo per dire all'utente di selezionare un'opzione, quindi mi piace il codice seguente:

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

Quando ho provato un'opzione con il valore! = Di una stringa vuota (null) l'opzione è stata sostituita da angolare, ma, quando ho messo un'opzione del genere (con valore null), la selezione appare con questa opzione.

Mi dispiace per il mio pessimo inglese e spero di esserti di aiuto in qualcosa con questo.

Utilizzo selectcon ngOptionse impostazione di un valore predefinito:

Consulta la documentazione di ngOptions per altri ngOptionsesempi di utilizzo.

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

Documentazione ufficiale su HTMLSELECT sull'elemento con associazione angolare dei dati.

Associazione selecta un valore non stringa tramite ngModelanalisi / formattazione:

(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

Altro esempio:

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

Questo ha funzionato per me.

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

Nel mio caso poiché l'impostazione predefinita varia da caso a caso nel modulo. Aggiungo un attributo personalizzato nel tag select.

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

nelle direttive ho creato uno script che controlla il valore e quando angolare lo riempie imposta l'opzione con quel valore su selezionata.

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

})

ho appena tradotto questo dal coffescript al volo, almeno il jist di esso è corretto se non la cosa del buco.

Non è il modo più semplice, ma fallo quando il valore varia

In risposta alla risposta di Ben Lesh , dovrebbe esserci questa linea

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

invece di

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

Questo è,

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

Basta usare ng-selected="true"come segue:

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

Vorrei impostare il modello nel controller. Quindi la selezione verrà impostata automaticamente su quel valore. Esempio: html:

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

Controller angolare (utilizzando la risorsa):

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

Questo funziona per me

ng-selected="true" 

Se si utilizza ng-optionsper il rendering, è possibile selezionare un menu a discesa optioncon lo stesso valore di ng-modal. Considera l'esempio:

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

Quindi l'opzione con lo stesso valore di list.keye selectedItem, è selezionata per impostazione predefinita.

Avevo bisogno che l'opzione "Please Select" predefinita non fosse selezionabile. Dovevo anche essere in grado di impostare condizionalmente un'opzione selezionata di default.

Ho raggiunto questo nel modo più semplice seguente: Codice JS: // Capovolgi questi 2 per testare il valore predefinito selezionato o nessun valore predefinito con il testo "Please Select" predefinito //$scope.defaultOption = 0; $ scope.defaultOption = {chiave: '3', valore: 'Opzione 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>         

Spero che questo aiuti qualcun altro che ha requisiti simili.

"Please Select" è stato realizzato attraverso la risposta di Joffrey Outtier qui .

Se hai qualcosa invece di solo avviare la parte della data, puoi usarla ng-init()dichiarandola nel tuo controller e usarla nella parte superiore del tuo HTML. Questa funzione funzionerà come un costruttore per il tuo controller e puoi avviare lì le tue variabili.

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>

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

prova questo nel tuo controller angolare ...

$ somethingHere = {name: 'Something Cool'};

È possibile impostare un valore, ma si sta utilizzando un tipo complesso e l'angolare cercherà chiave / valore da impostare nella vista.

E, se non funziona, prova questo: ng-options = "option.value come option.name per l'opzione nella traccia delle opzioni per option.name"

Penso che il modo più semplice sia

 ng-selected="$first"