So legen Sie eine Standardoption im Auswahlfeld Angular.js fest

311

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>
iConnor
quelle
3
Es wäre schön, wenn es eine Antwort gäbe, die nicht davon ausgeht, dass zum Erstellen der Optionen ein Winkel verwendet wird. Was ist, wenn die Optionen bereits Teil des Markups sind?
pspahn
1
@pspahn - laut docs.angularjs.org/api/ng/directive/ngOptions : only a **single** hard-coded <option> element ... can be nested into the <select> element.Die Optionen konnten nicht bereits Teil des Markups sein.
Der DIMM Reaper
1
@pspahn das würde das OP nicht beantworten, aber eine ganz andere Frage ...
Mario Trucco

Antworten:

366

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>
zs2020
quelle
20
Ich hatte ein Problem mit dieser Arbeit, es war, dass ich 'track by' verwendete und es entfernte, um das Problem zu beheben, nur für den Fall, dass jemand auf der
ganzen
61
An dieser Antwort ist nichts auszusetzen, aber ng-init ist in meinem speziellen Fall für mich fehlgeschlagen. Das Problem war, dass der von mir verwendete Wert zum Zeitpunkt der Ausführung von ng-init noch nicht verfügbar war: Ich habe den Wert über einen Ajax-Aufruf erhalten und zu diesem Zeitpunkt war ng-init bereits fertig. Am Ende habe ich einen Watcher für diesen Wert verwendet und in dieser Funktion habe ich dasselbe getan wie in ng-init. Das hat funktioniert.
Maurits
2
Ich hatte auch Probleme, dies zu klären. Der Kommentar von @maurits führte mich zu diesem stackoverflow.com/questions/22348886 Viel Spaß!
Michael
5
In der Dokumentation von Angular heißt es, den Bereich $ controller für die Initialisierung dieser Art von Werten besser zu nutzen. Docs.angularjs.org/api/ng/directive/ngInit
Fortuna
3
Warnung: Die Verwendung von ng-init für diesen Zweck kann zu übermäßigen Aufrufen der $ Digest () -Methode führen, was dazu führen kann, dass Ihre Konsolenausgabe mit Meldungen wie "10 $ Digest () -Iterationen erreicht. Abbrechen!" rot und hässlich aussieht.
DMac der Zerstörer
235

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>
Ben Lesh
quelle
22
Diese Lösung hat gut funktioniert und ist besser als die ausgewählte Antwort.
MJ
sollte das ng-init nicht so aussehen ng-init = "SomethingHere = SomethingHere || Optionen [0]" ??
Endlosschleife
1
Wie gehe optionsich damit um, leer zu sein? Wie bei optionsDaten, die aus externen Quellen stammen.
null
1
@suud Sie müssen nur die Optionen && options.length> 0 in Ihrem ng-init überprüfen. Eigentlich sollte das meiste in Ihrem Controller erledigt werden, damit es getestet werden kann.
Ben Lesh
@ BenLesh Wenn ich anstelle der ersten Option Text (Zeichenfolge) schreiben möchte. ng-init="somethingHere= somethingHere || 'Select one' " Ich habe es so versucht. aber es hat nicht funktioniert. Was ist los in meinem Code
Codelearner
69

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.

Michael Benford
quelle
2
Das Problem ist, dass ich dies für viele Auswahlfelder tun müsste.
iConnor
Ich habe es nicht verstanden. Was müssten Sie tun?
Michael Benford
Ich müsste es manuell für vielleicht 50+ Auswahlfelder tun
iConnor
Sie meinen, den Standardwert für jedes Auswahlfeld festzulegen? Wenn ja, denke ich, ist das in Ihrer Frage nicht klar. Wie auch immer, kann ich zu Recht davon ausgehen, dass Sie die Elemente in jedes Auswahlfeld laden müssen? Wenn ja, denke ich nicht, dass das Initialisieren ihrer Standardwerte eine große Sache wäre.
Michael Benford
1
Mein Problem ist, dass der Index der Option von einem "Senden" auf dem Formular zurückgegeben wird. Was ich brauche, ist das, was Sie option.name nennen, was von einem einfachen alten Rails-Formular zurückgegeben wurde. Das Kontrollkästchen und die Optionsfelder funktionieren einwandfrei, da Sie ng-repeat verwenden, um das richtige Markup zu erhalten. Wie erhalte ich den option.name zum Zeitpunkt der Formularübermittlung zurück?
pferrel
40

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

mikhail-t
quelle
1
Danke, es hat mir geholfen;)
Brahim LAMJAGUAR
1
Genial! Vielen Dank!
Iurii Golskyi
33

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

Srivathsa Harish Venkataramana
quelle
Das hat bei mir funktioniert. Ich denke, Angular brauchte etwas, um das Objekt im Modell meines Oszilloskops als äquivalent zu einer Auswahl der Referenzliste zu identifizieren. "track by guarantor.code" hat es geschafft!
Markbaldy
22

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.

allenhwkim
quelle
5
Dies funktioniert, sollte aber nicht verwendet werden, da ng-optionses schneller und optimierter ist als ng-repeat.
Iso
@Ich bin auch nicht anderer Meinung als Sie, aber haben Sie eine Quelle für diese Informationen?
Adam Plocher
1
Genau hier in den Dokumenten: docs.angularjs.org/api/ng/directive/ngOptions "mehr Flexibilität bei der <select>Zuweisung des Modells über den select asTeil des Verständnisausdrucks", "reduzierter Speicherverbrauch, indem kein neuer Bereich für erstellt wird." jede wiederholte Instanz “,„ erhöhte Rendergeschwindigkeit durch Erstellen der Optionen in einem documentFragmentstatt einzeln “
Iso
16

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

Penner
quelle
1
Ich habe versucht, dies in HTML zu konvertieren, aber es ist in allen Online-Konvertern, die ich versucht habe, fehlgeschlagen.
iConnor
5
Warum nicht HTML posten? Ich meine, war es wirklich notwendig, den Code so zu veröffentlichen? Es ist nicht so, dass das OP in der Frage eine Template-Engine verwendet hat.
arg20
14

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>
Jayen Chondigara
quelle
Arbeitete Lekker für mich. Der asynchrone Aufruf, der für die Bindungsoptionen für meine Auswahlliste verantwortlich ist, war etwas langsamer als der, der das ng-Modell brachte, daher hat mir dieser Ansatz sehr geholfen. Danke Eebbesen :-)
ajaysinghdav10d
Das funktioniert auch bei mir. Einfach und verständlich.
Kent Aguilar
10

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>
Alex Hawkins
quelle
10

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.

Maciel Bombonato
quelle
8

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

shilovk
quelle
4

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>
Bishan
quelle
3

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

Bruno
quelle
3

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>

Li Tianjiang
quelle
3

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>
Shevon Silva
quelle
2

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
  }
});
Jens Alenius
quelle
2

Das funktioniert bei mir

ng-selected="true" 
Ich weiß es nicht
quelle
Am besten verwenden ng-initSie, weil Sie ein ngModel festlegen.
Juanjo Salvador
1

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.

Rubi saini
quelle
1

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 .

Spencer Sullivan
quelle
0

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>
ofir_aghai
quelle
0
    <!--
    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>
Mohammad Rahman
quelle
0

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"

Wesley Rocha
quelle
-1

Ich denke, der einfachste Weg ist

 ng-selected="$first"
Cesar Alonso
quelle
6
Diese Antwort liefert keinen Kontext.
pspahn