it-swarm.com.de

Wie man eine Standardoption in der Auswahlbox Angular.js hat

Ich habe Google gesucht 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 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, um ein solches Ergebnis zu erhalten?.

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

Sie können einfach ng-init wie folgt verwenden

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

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

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

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 ist, ändern Sie das ng-options-Attribut 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 in Anbetracht der oben genannten.

68
Michael Benford

Nur ein Antwort von Srivathsa Harish Venkataramana erwähnte track by, was tatsächlich eine Lösung dafür ist!

Hier ist ein Beispiel zusammen mit Plunker (Link unten), wie track by in selectng-options verwendet wird:

<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 für den Winkelbereich definiert ist und die id-Eigenschaft den gleichen Wert hat wie id einer beliebigen city in der cities-Liste, wird sie beim Laden automatisch ausgewählt.

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

36
mik-t

Ich denke, nach dem Einfügen von "Track by" können Sie es in ng-options verwenden, um 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 etwasHier ist natürlich ein Objekt mit den Eigenschaften Name und ID. Bitte beachten Sie, dass 'as' nicht auf diese Weise zum Ausdruck 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 verwendet ng-init, aber document besagt, wenn möglich ng-init zu vermeiden. 

NgInit eignet sich nur für das Aliasing von speziellen Eigenschaften von ngRepeat, wie unten in der Demo gezeigt. Abgesehen von diesem Fall sollten Sie Verwenden Sie Controller anstelle von ngInit, um Werte für einen Bereich zu initialisieren.

Sie können auch ng-repeat anstelle von ng-options für Ihre Optionen verwenden. Mit ng-repeat können Sie ng-selected mit speziellen Eigenschaften von ng-repeat verwenden. $ 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 vorziehen, wenn Sie wissen, welchen Wert Sie wählen sollen: https://stackoverflow.com/a/29564802/454252 , wobei track-by und ng-options ohne ng-init oder verwendet werden ng-repeat.

Diese Antwort sollte nur verwendet werden, wenn Sie das erste Element auswählen müssen, ohne zu wissen, welchen Wert Sie wählen sollen. Ich verwende dies beispielsweise für die automatische Vervollständigung, was es erforderlich macht, immer den ersten Punkt auszuwählen.

22
allenhwkim

Meine Lösung hierfür war die Verwendung von HTML, um meine Standardoption zu kodieren. So wie:

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. Entschuldige auch mein 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.

16
penner

Verwenden Sie den folgenden Code, um die ausgewählte Option Ihres Modells aufzufü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>
14

In meinem Fall musste ich nur einen Anfangswert eingeben, um den Benutzer mitzuteilen, dass er eine Option auswählen soll. 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! = Eines leeren Strings (null) ausprobierte, wurde die Option durch eckige ersetzt, aber wenn Sie eine solche Option setzen (mit Nullwert), erscheint die Auswahl mit dieser Option.

Entschuldigung von meinem schlechten Englisch und ich hoffe, dass ich dabei etwas helfe.

10

Je nachdem, wie viele Optionen Sie haben, können Sie Ihre Werte in ein Array einfügen und Ihre Optionen wie folgt automatisch 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>
10
Alex Hawkins

Verwenden von select mit ngOptions und Festlegen eines Standardwerts:

Weitere Verwendungsbeispiele für ngOptions finden Sie in der Dokumentation zu 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 über HTML SELECT Element mit eckiger Datenbindung.

Binden von select an einen Nicht-String-Wert über ngModel Parsen/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

8
shilovk

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

Als Antwort auf Ben Leshs Antwort 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>

3
Li Tianjiang

In meinem Fall, da sich die Standardeinstellung von Fall zu Fall im Formular unterscheidet, füge ich dem select-Tag ein benutzerdefiniertes Attribut hinzu.

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

in den Direktiven habe ich ein Skript erstellt, das den Wert prüft. Wenn der Winkel ausgefüllt wird, wird die Option mit diesem Wert auf "Auswahl" gesetzt.

 .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 aus dem Coffescript on the fly übersetzt, zumindest der Jist ist richtig, wenn nicht die ganze Sache.

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

3
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>
3
Shevon Silva

Ich würde das Modell im Controller einstellen. Dann wird der Wert standardmäßig auf diesen Wert gesetzt. Beispiel: Html:

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

Winkelsteuerung (mit 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
  }
});
2
Jens Alenius

Wenn Sie ng-options zum Rendern verwenden, wird Dropdown als option mit dem gleichen Wert wie von ng-modal als Standard ausgewählt.

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

Die Option mit dem gleichen Wert von list.key und selectedItem ist standardmäßig ausgewählt.

1
Rubi saini

Wenn Sie etwas haben, anstatt nur den Datumsteil zu initialisieren, können Sie ng-init() verwenden, indem Sie es in Ihrem Controller deklarieren und oben in Ihrem HTML-Code verwenden. Diese Funktion wird wie ein Konstruktor für Ihren Controller und Sie funktionieren Dort können Sie 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>
1
ofir_aghai

Das funktioniert für mich

ng-selected="true" 
1
I don't know

versuchen Sie dies in Ihrem Winkelcontroller ...

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

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

Wenn dies nicht funktioniert, versuchen Sie Folgendes: Ng-options = "option.value als option.name für Option in Optionen, verfolgen nach Option.name

0
Wesley Rocha

Ich brauchte die Standardeinstellung "Bitte auswählen", um nicht ausgewählt zu werden. 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: // Diese 2 umdrehen, um die ausgewählte Standardeinstellung zu testen oder keine Standardeinstellung mit dem Standardtext "Please Select". //$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, das hilft jemandem, der ähnliche Anforderungen hat.

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

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>
0
Mohammad Rahman