So haben Sie eine Standardoption im Auswahlfeld von Angular.js

Question 1

Ich habe Google durchsucht und kann nichts dazu 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 ungefähr so.

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

Question 2

Sie können einfach verwenden ng-init so was

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

Question 3

Wenn Sie sicherstellen möchten, dass Ihre $scope.somethingHere value nicht überschrieben wird, wenn Ihre Ansicht initialisiert wird, sollten Sie zusammenführen (somethingHere = somethingHere || options[0].value) den Wert in Ihrem ng-init wie folgt:

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

Question 4

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 den Wert, der an das Modell gebunden wird, wirklich festlegen möchten, ändern Sie die ng-options zuschreiben

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

und das Javascript zu

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

Noch ein Plunker Hier unter Berücksichtigung des oben Gesagten.

Question 5

Nur eine Antwort von Srivathsa Harish Venkataramana erwähnt track by das ist in der Tat eine Lösung dafür!

Hier ist ein Beispiel zusammen mit Plunker (Link unten) zur Verwendung track by in auswählen 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 selectedCity ist auf Winkelbereich definiert, und es hat id Eigenschaft mit dem gleichen Wert wie jede id von irgendwelchen city auf der cities Liste, es wird beim Laden automatisch ausgewählt.

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

Siehe Quelldokumentation für weitere Details:
https://code.angularjs.org/1.3.15/docs/api/ng/directive/select

Question 6

Ich denke, nach der Aufnahme von „track by“ können Sie es in ng-options verwenden, um das zu bekommen, 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, denn wenn Sie die Liste der Zeichenfolgen durch die Liste der Objekte ersetzen möchten, ändern Sie dies einfach in

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

wobei irgendetwasHere natürlich ein Objekt mit den Eigenschaften name und id ist. Bitte beachten Sie, dass ‘as’ nicht auf diese Weise verwendet wird, um die ng-Optionen auszudrücken, da es nur den Wert festlegt und Sie ihn nicht ändern können, wenn Sie track by verwenden

Question 7

Die akzeptierte Antwort verwenden ng-initaber dokumentieren sagt, ng-init möglichst zu vermeiden.

Die einzig angemessene Verwendung von ngInit ist das Aliasing spezieller Eigenschaften von ngRepeat, wie in der Demo unten zu sehen ist. Abgesehen von diesem Fall sollten Sie Controller anstelle von ngInit verwenden, um Werte in einem Bereich zu initialisieren.

Sie können auch verwenden ng-repeat anstatt ng-options für Ihre Optionen. Mit ng-repeatkönnen Sie verwenden ng-selected mit ng-repeat besondere Eigenschaften. dh $index, $odd, $even, 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>

———————- BEARBEITEN —————-
Obwohl dies funktioniert, würde ich die Antwort von @mik-t bevorzugen, wenn Sie wissen, welchen Wert Sie auswählen müssen, https://stackoverflow.com/a/29564802/454252, der verwendet wird track-by und ng-options ohne zu benutzen ng-init oder 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 müssen. Zum Beispiel verwende ich dies für die automatische Vervollständigung, bei der ständig das ERSTE Element ausgewählt werden muss.

Question 8

Meine Lösung dafür war die Verwendung von HTML, um meine Standardoption fest zu codieren. 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 &amp; ON

Im HTML-Format:

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