Wie man eine Standard-option in Angular.js select-box

Ich habe Google gesucht und kann nichts finden.

Habe ich diesen code.

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

Mit einigen Daten wie diese

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

Und die Ausgabe ist so etwas wie dieses.

<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 der Standardwert, so würde man ein Ergebnis erhalten, wie dieses.

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

Es wäre schön, wenn es eine Antwort gab, die nicht davon ausgehen, dass Winkel wurde genutzt, um die Optionen. Was ist, wenn die Optionen sind bereits Teil der markup?
nach docs.angularjs.org/api/ng/directive/ngOptions: nur a **single** hard-coded <option> element ... can be nested into the <select> element. Die Optionen konnten nicht bereits Teil des Markups.
das wäre keine Antwort auf die OP, aber eine ganz andere Frage...

InformationsquelleAutor iConnor | 2013-08-12

351

Können Sie einfach ng-init wie diese
```
<select ng-init="somethingHere = options[0]" 
        ng-model="somethingHere" 
        ng-options="option.name for option in options">
</select>
```
Ich hatte ein problem mit dieser arbeiten war es, ich war mit 'track by', entfernen das problem behoben, nur für den Fall, dass jemand hilft, auf der ganzen Linie 😀
Nichts falsch mit dieser Antwort, aber ng-init failed für mich in meinem spezifischen Fall. Problem war, dass der Wert I war Verwendung wurde noch nicht lieferbar zu der Zeit ng-init lief: ich habe den Wert über einen ajax-Aufruf, und in diesem moment der ng-init schon fertig war. Am Ende benutzte ich einen watcher auf diesen Wert und in dieser Funktion habe ich die gleiche, wie ich im ng-init. Das hat geklappt.
Auch ich hatte Probleme bekommen, dies hat geklappt, @maurits Kommentar führte mich zu dieser stackoverflow.com/questions/22348886 viel Spaß!
Die Dokumentation der Winkel sagt, um besser mit dem controller $scope für die Initialisierung diese Art von Werten docs.angularjs.org/api/ng/directive/ngInit
Warnung: die Verwendung von ng-init für diesen Zweck kann dazu führen, übermäßige Aufrufe der $digest () - Methode, die kann dazu führen, dass die Ausgabe in der Konsole zu sehen alle rot und hässlich mit Nachrichten lik "10 $digest() Iterationen erreicht. Aborting!"

InformationsquelleAutor zs2020
228

Wenn Sie sicherstellen möchten, dass Ihre $scope.somethingHere Wert nicht überschrieben wird, wenn die view initialisiert wird, werden Sie wollen, zu verschmelzen (somethingHere = somethingHere || options[0].value) der Wert in Ihrer ng-init, zum Beispiel so:
```
<select ng-model="somethingHere" 
        ng-init="somethingHere = somethingHere || options[0].value"
        ng-options="option.value as option.name for option in options">
</select>
```
Diese Lösung hat gut funktioniert und ist besser als die ausgewählte Antwort.
sollte nicht die ng-init wie folgt Aussehen ng-init="somethingHere = somethingHere || Optionen[0]" ??
Der Umgang mit options leer? Wie im Fall des options Daten kommen aus externen Quelle.
Sie würden einfach brauchen, um zu überprüfen, Optionen && Optionen.Länge > 0 in Ihrem ng-init. Wirklich, die meisten sollte dies in Ihrem controller, so dass es getestet werden.
Wenn ich will, zu schreiben einen text(string), statt der ersten option.ng-init="somethingHere= somethingHere || 'Select one' " ich habe versucht, wie diese. aber es hat nicht funktioniert. was ist falsch in meinem code

InformationsquelleAutor Ben Lesh
69

Versuchen Sie 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 wollen, um den Wert gebunden werden, um das Modell, dann ändern Sie die ng-options Attribut
```
ng-options="option.value as option.name for option in options"
```
und der Javascript-Code
```
...
$scope.selectedOption = $scope.options[0].value;
```
Anderen Plunker hier in Anbetracht der oben genannten.

Das problem ist, ich müsste dies tun, für Lasten von select-Boxen.
Ich habe es nicht erhalten. Was würden Sie tun?
Hätte ich es manuell tun, vielleicht 50+ Felder auswählen
Du meinst die Einstellung der Standard-Wert für jede select-box? Wenn ja, ich denke, das ist nicht klar in deiner Frage. Jedenfalls bin ich Recht davon ausgehen, dass Sie hätte zum laden der Elemente in jeder select-box? Wenn ja, ich glaube nicht, dass das initialisieren Ihre default-Werte würde eine große Sache sein.
Mein problem ist, dass der index der option zurück von einer "Absenden" auf dem Formular. Was ich brauche, ist, was Sie nennen option.Namen, das ist, was zurückgegeben wurde aus einer einfachen alten Schienen bilden. Die checkbox und radio-buttons funktionieren, da Sie die Verwendung von ng-repeat, um die richtige markup. Wie bekomme ich die option.name zurückgegeben form-Unterordnung-Zeit?

InformationsquelleAutor Michael Benford
38

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), wie track by im wählen Sie 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 definiert durch Winkel-Bereich, und es hat id Eigenschaft mit dem gleichen Wert wie jede id jeder city auf die cities Liste, es wird auto ausgewählt, auf laden.

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

Siehe Quelltext-Dokumentation für weitere details:
https://code.angularjs.org/1.3.15/docs/api/ng/directive/select

Große code in Plunker. Danke!!!
Danke es hat mir geholfen 😉
Genial! Danke!

InformationsquelleAutor mik-t
33

Ich denke, nach der Aufnahme "track by', können Sie es im ng-Optionen zu bekommen, was Sie wollten, wie die folgenden
```
 <select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" ></select>
```
Diese Weise zu tun, ist es besser, weil, wenn Sie wollen, ersetzen Sie die Liste der strings mit einer Liste von Objekten, die Sie nur ändern
```
 <select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>
```
wo somethingHere ist ein Objekt mit den Eigenschaften name und id -, natürlich. Bitte beachten Sie, 'als' ist nicht verwendet in dieser Art und Weise auszudrücken, die ng-Optionen, denn es wird nur der Wert gesetzt und Sie werden nicht in der Lage, es zu ändern, wenn Sie mit track-by -

Das ist was für mich gearbeitet. Ich denke, eckig brauchten etwas, um das Objekt ermitteln, das in meinem Bereich ist das Modell als gleichwertig zu einer Auswahl der Referenz-Liste. "track-by-Garant.code" hat den trick!

InformationsquelleAutor Srivathsa Harish Venkataramana
22

Akzeptierte Antwort ng-init, aber Dokument sagt, um zu vermeiden, ng-init wenn möglich.

Nur die angemessene Verwendung von ngInit ist für aliasing-Besondere Eigenschaften
der ngRepeat, wie in der demo unten. Neben diesem Fall sollten Sie
Controller verwenden, anstatt ngInit zum initialisieren von Werten auf einem Bereich.

Können Sie auch ng-repeat statt ng-options für Ihre Optionen. Mit ng-repeat, die Sie verwenden können, ng-ausgewählt mit ng-repeat besonderen Eigenschaften. d.h. $index, $ungerade $sogar um diese Arbeit zu machen, ohne Codierung.

$first ist eine der ng-repeat besonderen Eigenschaften.
```
  <select ng-model="foo">
    <option ng-selected="$first" ng-repeat="(id,value) in myOptions" value="{{id}}">
      {{value}}
    </option>
  </select>
```
---------------------- BEARBEITEN ----------------

Obwohl dies funktioniert, ich würde lieber @mik-t ' s zu beantworten, wenn Sie wissen, welcher Wert zu wählen, https://stackoverflow.com/a/29564802/454252, die verwendet track-by und ng-options ohne Verwendung ng-init oder ng-repeat.

Diese Antwort sollte nur verwendet werden, wenn Sie müssen wählen Sie das erste Element, ohne zu wissen, was mit dem Wert zu wählen. z.B. ich bin mit diesem für auto-Vervollständigung, die erfordert, wählen Sie das ERSTE Element die ganze Zeit.

Das funktioniert, aber sollte nicht verwendet werden, weil ng-options ist schneller und mehr optimiert, als ng-repeat.
Stimme mit Ihnen überein, aber hast du eine Quelle für diese Informationen?
Genau hier, in den docs: docs.angularjs.org/api/ng/directive/ngOptions "mehr Flexibilität in, wie die <select>'s Modell zugeordnet ist, über die select as Teil der Verständnis-Ausdruck", "reduziert den Speicherbedarf nicht die Schaffung eines neuen Bereichs für jede wiederholte Instanz", "erhöhter render-Geschwindigkeit von erstellen die Optionen in einem documentFragment statt individuell"

InformationsquelleAutor allenhwkim
16

Meine Lösung war das verwenden von html zu fest zu meinem Standard-option. Etwa 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
```
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 soll meine Standard-option, um alle Werte aus meinem api, das ist, warum ich einen leeren Wert. Auch entschuldigen Sie mein haml. Ich weiß, das ist nicht direkt eine Antwort auf die OP-Frage, aber die Leute finden diese über Google. Hoffe, dies hilft jemand anderes.

Ich habe versucht, zu konvertieren, das auf html aber es hat nicht in allen online-Konverter, die ich bisher ausprobiert habe.
Warum nicht post-html? Ich meine, war die Buchung der code wie wirklich notwendig? Es ist nicht so, die OP wurde unter Verwendung einer Template-engine in Frage.
Es ist nur haml.info ... poste ich einige html-kurz

InformationsquelleAutor penner
14

Folgenden code verwenden, der zum Auffüllen ausgewählten option von Ihrem Modell.
```
<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>
```
Gearbeitet lekker für mich. Der asynchrone Aufruf verantwortlich für die Bindung von Optionen für meine select-Liste wurde ein wenig langsamer als die eine, die brachte ng-Modell, sodass diese angefahren hat mir sehr geholfen. Dank Eebbesen:-)
Dies funktioniert für mich auch. Einfach und verständlich.

InformationsquelleAutor Jayen Chondigara
10

Je nachdem, wie viele Optionen, die Sie haben, könnten Sie setzen Ihre Werte in einem array und automatisch füllen Sie Ihre Optionen wie diese
```
<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
   <option value="">Pick a Number</option>
</select>
```
InformationsquelleAutor Alex Hawkins
10

In meinem Fall war ich das einfügen muss einen ursprünglichen Wert, nur um sagen zu Benutzer, um eine option auszuwählen, also, ich mag den code unten:
```
<select ...
    <option value="" ng-selected="selected">Select one option</option>
</select>
```
Als ich versuchte, die option mit dem Wert != ein leerer string (null) die option wurde ersetzt durch die eckigen, aber, wenn man eine option wie das (mit null-Wert), wählen Sie apear mit dieser option.

Sorry, durch mein schlechtes Englisch und ich hoffe, dass ich helfen etwas mit.

InformationsquelleAutor Maciel Bombonato

Dieser arbeitete für mich.

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

InformationsquelleAutor Bishan

In meinem Fall, da der Standard variiert von Fall zu Fall in der form.
Ich fügen Sie ein benutzerdefiniertes Attribut in der select-tag.

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

in den Richtlinien erstellte ich ein Skript, das überprüft, der Wert und, wenn Winkel füllt es in die Einstellung mit, dass der Wert ausgewählt.

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

})

übersetzt, dieses von coffescript auf die Fliegen zumindest die jist davon ist richtig, wenn nicht das ganze.

Es ist nicht der einfachste Weg, aber bekommen es getan, wenn der Wert variiert

InformationsquelleAutor Bruno

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>

InformationsquelleAutor Shevon Silva

Ich würde das Modell in der Steuerung. Dann wählen Sie die Standardeinstellung für diesen Wert. Ex:
html:

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

Winkel-Steuerung (Quelle):

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

InformationsquelleAutor Jens Alenius

1

Wenn Sie ng-options zu leisten drop-down-als option mit demselben Wert wie der ng-modal ist standardmäßig 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">
```
Also option mit demselben Wert list.key und selectedItem ist standardmäßig ausgewählt.

InformationsquelleAutor Rubi saini
1

Diese arbeiten für mich
```
ng-selected="true" 
```
Beste Weg ist, um ng-init weil Sie die Einstellung einer ngModel.

InformationsquelleAutor I don't know

Wenn Sie etwas, statt nur init dem Datum Teil, die Sie verwenden können ng-init() durch deklarieren es in Ihrem controller, und verwenden Sie es in der Spitze der HTML.
Diese Funktion funktioniert wie ein Konstruktor für Ihren controller, und initiieren Sie Ihre Variablen gibt.

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>

InformationsquelleAutor ofir_aghai

Brauchte ich die Standard - "Bitte Wählen", werden nicht auswählbare. Ich musste auch in der Lage sein, bedingt festlegen eine standardmäßig ausgewählte option.

Ich erreicht, das die folgende einfache Weise:
JS-code:
//Flip diese 2 zu test ausgewählten Standard oder kein Standard-mit Standard - "Bitte Wählen Sie" text
//$scope.defaultOption = 0;
$Umfang.defaultOption = { key: '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 anderes hat ähnliche Anforderungen.

"Bitte Wählen Sie" wurde erreicht durch Joffrey Outtier Antwort hier.

InformationsquelleAutor Spencer Sullivan

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

InformationsquelleAutor Mohammad Rahman

0

versuchen, diese in Ihrem Winkel-controller...

$somethingHere = {name: 'Etwas Kühl'};

Können Sie einen Wert festlegen, aber Sie sind mit einem komplexen Typ und die Winkelgeschwindigkeit wird die Suche-Taste/Wert zu setzen.

Und wenn nicht funktioniert, versuchen Sie dies :
ng-options=" - option.Wert als option.Namen für die option, in den Optionen track-by-option.name"

InformationsquelleAutor Wesley Rocha
-1

Ich denke, der einfachste Weg ist
```
 ng-selected="$first"
```
Diese Antwort enthält null-Kontext.

InformationsquelleAutor Cesar Alonso
-4

Die Beste und Einfachste Weg(Aktualisiert)

hier Erklärt
https://stackoverflow.com/a/37962911/5902146

InformationsquelleAutor shreedhar bhat

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Die Beste und Einfachste Weg(Aktualisiert)