So legen Sie eine Standardoption im Auswahlfeld Angular.js fest

Ich habe Google durchsucht und kann hier nichts finden.

Ich habe diesen Code.

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

Mit einigen Daten wie diesen

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

Und die Ausgabe ist so ähnlich.

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

Wie ist es möglich, die erste Option in den Daten als Standardwert festzulegen, damit Sie ein solches Ergebnis erhalten?

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

Sie können einfach verwenden ng-init wie diese

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

Wenn Sie sicherstellen möchten, dass Ihr $scope.somethingHereWert bei der Initialisierung Ihrer Ansicht nicht überschrieben wird, möchten Sie somethingHere = somethingHere || options[0].valueden Wert in Ihrem ng-init wie folgt zusammenführen ( ):

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

Versuche dies:

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

Wenn Sie wirklich den Wert festlegen möchten, der an das Modell gebunden wird, ändern Sie das ng-optionsAttribut in

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

und das Javascript zu

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

Ein weiterer Plunker hier unter Berücksichtigung der oben genannten.

Nur eine Antwort von Srivathsa Harish Venkataramana erwähnte, track bywas in der Tat eine Lösung dafür ist!

Hier ist ein Beispiel zusammen mit Plunker (Link unten) für die Verwendung 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>

Wenn selectedCityauf Winkelbereich definiert, und es hat idEigenschaft mit dem gleichen Wert wie jeder idvon jedem cityauf der citiesListe, wird es automatisch auf Last ausgewählt sein.

Hier ist Plunker dafür: http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

Weitere Informationen finden Sie in der Quelldokumentation: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select

Ich denke, nach der Aufnahme von 'track by' können Sie es in ng-Optionen verwenden, um das zu erhalten, was Sie wollten, wie im Folgenden

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

Diese Vorgehensweise ist besser, da Sie dies nur ändern, wenn Sie die Liste der Zeichenfolgen durch die Liste der Objekte ersetzen möchten

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

Dabei ist natürlich ein Objekt mit dem Eigenschaftsnamen und der ID. Bitte beachten Sie, dass 'as' auf diese Weise nicht zum Ausdrücken der ng-Optionen verwendet wird, da nur der Wert festgelegt wird und Sie ihn nicht ändern können, wenn Sie track by verwenden

Die akzeptierte Antwort wird verwendet ng-init, aber das Dokument besagt, dass ng-init nach Möglichkeit vermieden werden soll.

Die einzige geeignete Verwendung von ngInit ist das Aliasing spezieller Eigenschaften von ngRepeat, wie in der folgenden Demo gezeigt. Außerdem sollten Sie Controller anstelle von ngInit verwenden, um Werte für einen Bereich zu initialisieren.

Sie können auch ng-repeat anstelle von ng-optionsfür Ihre Optionen verwenden. Mit ng-repeatkönnen Sie ng-selectedmit ng-repeatspeziellen Eigenschaften verwenden. dh $ index, $ odd, $ gerade, damit dies ohne Codierung funktioniert.

$first ist eine der besonderen Eigenschaften von ng-repeat.

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

---------------------- EDIT ----------------
Obwohl dies funktioniert, würde ich @ mik-t's bevorzugen Antworten Sie, wenn Sie wissen, welchen Wert Sie auswählen sollen: https://stackoverflow.com/a/29564802/454252 , der verwendet track-byund ng-optionsohne ng-initoder verwendet ng-repeat.

Diese Antwort sollte nur verwendet werden, wenn Sie das erste Element auswählen müssen, ohne zu wissen, welchen Wert Sie auswählen sollen. Ich verwende dies beispielsweise für die automatische Vervollständigung, bei der ständig das ERSTE Element ausgewählt werden muss.

Meine Lösung hierfür war die Verwendung von HTML, um meine Standardoption fest zu codieren. Wie so:

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>

Ich möchte, dass meine Standardoption alle Werte von meiner API zurückgibt. Deshalb habe ich einen leeren Wert. Entschuldigen Sie auch meinen Haml. Ich weiß, dass dies keine direkte Antwort auf die Frage des OP ist, aber die Leute finden dies bei Google. Hoffe das hilft jemand anderem.

Verwenden Sie den folgenden Code, um die ausgewählte Option aus Ihrem Modell zu füllen.

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

Abhängig davon, wie viele Optionen Sie haben, können Sie Ihre Werte in ein Array einfügen und Ihre Optionen automatisch wie folgt ausfüllen

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

In meinem Fall musste ich nur einen Anfangswert einfügen, um den Benutzer anzuweisen, eine Option auszuwählen. Daher gefällt mir der folgende Code:

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

Wenn ich eine Option mit dem Wert! = Einer leeren Zeichenfolge (null) ausprobiert habe, wurde die Option durch eckig ersetzt. Wenn Sie jedoch eine solche Option (mit dem Wert null) einfügen, wird die Auswahl mit dieser Option angezeigt.

Tut mir leid durch mein schlechtes Englisch und ich hoffe, dass ich dabei etwas helfe.

Verwenden selectmit ngOptionsund Festlegen eines Standardwerts:

Weitere Verwendungsbeispiele finden Sie in der ngOptions- Dokumentation 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

Offizielle Dokumentation zum HTML-SELECTElement mit eckiger Datenbindung.

Bindung selectan einen Nicht-String-Wert durch ngModelParsen / Formatieren:

(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

Anderes Beispiel:

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

Das hat bei mir funktioniert.

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

In meinem Fall, da die Standardeinstellung von Fall zu Fall im Formular variiert. Ich füge dem Auswahl-Tag ein benutzerdefiniertes Attribut hinzu.

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

In den Anweisungen habe ich ein Skript erstellt, das den Wert überprüft und beim Ausfüllen durch Winkel die Option mit diesem Wert auf "Ausgewählt" setzt.

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

})

Ich habe das gerade spontan aus dem Coffescript übersetzt, zumindest ist es richtig, wenn nicht das ganze Ding.

Es ist nicht der einfachste Weg, aber erledigen Sie es, wenn der Wert variiert

Als Antwort auf die Antwort von Ben Lesh sollte es diese Zeile geben

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

anstatt

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

Das ist,

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

Verwenden Sie einfach ng-selected="true"wie folgt:

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

Ich würde das Modell in der Steuerung einstellen. Dann wird die Auswahl standardmäßig auf diesen Wert eingestellt. Beispiel: html:

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

Winkelregler (unter Verwendung der 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
  }
});

Das funktioniert bei mir

ng-selected="true" 

Wenn Sie ng-optionszum Rendern verwenden, optionwird standardmäßig ein Dropdown-Menü mit dem gleichen Wert wie bei ng-modal ausgewählt. Betrachten Sie das Beispiel:

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

Daher ist die Option mit dem gleichen Wert von list.keyund selectedItemstandardmäßig ausgewählt.

Ich brauchte die Standardeinstellung "Bitte auswählen", um nicht auswählbar zu sein. Ich musste auch in der Lage sein, eine standardmäßig ausgewählte Option bedingt festzulegen.

Ich habe dies auf folgende vereinfachte Weise erreicht: JS-Code: // Drehe diese 2 um, um den ausgewählten Standard oder keinen Standard mit dem Standardtext "Bitte auswählen" zu testen //$scope.defaultOption = 0; $ scope.defaultOption = {Schlüssel: '3', Wert: '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>         

Ich hoffe, dies hilft jemand anderem, der ähnliche Anforderungen hat.

Die "Bitte auswählen" wurde durch die Antwort von Joffrey Outtier hier erreicht .

Wenn Sie etwas haben, anstatt nur den Datumsteil zu initiieren, können Sie es verwenden, ng-init()indem Sie es in Ihrem Controller deklarieren und oben in Ihrem HTML verwenden. Diese Funktion funktioniert wie ein Konstruktor für Ihren Controller, und Sie können dort Ihre Variablen initiieren.

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>

Versuchen Sie dies in Ihrem Winkelregler ...

$ SomethingHere = {Name: 'Etwas Cooles'};

Sie können einen Wert festlegen, verwenden jedoch einen komplexen Typ, und der Winkel sucht nach Schlüssel / Wert, der in Ihrer Ansicht festgelegt werden soll.

Wenn dies nicht funktioniert, versuchen Sie Folgendes: ng-options = "option.value as option.name für die Option in options track by option.name"

Ich denke, der einfachste Weg ist

 ng-selected="$first"