Jak mieć domyślną opcję w polu wyboru Angular.js


311

Przeszukałem Google i nie mogę znaleźć niczego na ten temat.

Mam ten kod.

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

Z takimi danymi

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

A wynik jest mniej więcej taki.

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

Jak można ustawić pierwszą opcję w danych jako wartość domyślną, aby uzyskać taki wynik?

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

3
Byłoby miło, gdyby istniała odpowiedź, która nie zakładałaby, że do zbudowania opcji użyto kątownika. Co jeśli opcje są już częścią znaczników?
pspahn

1
@pspahn - zgodnie z docs.quarejs.org/api/ng/directive/ngOpcje : tylko a **single** hard-coded <option> element ... can be nested into the <select> element.Opcje nie mogą już być częścią znaczników.
DIMM Reaper,

1
@pspahn, który nie odpowiedziałby na OP, ale zupełnie inne pytanie ...
Mario Trucco,

Odpowiedzi:


366

Możesz po prostu użyć ng-init w ten sposób

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

20
Miałem problem z działaniem, ponieważ korzystałem z funkcji „Śledź przez”, usunięcie go naprawiło problem, na wypadek, gdyby to pomogło komuś
zepsuć

61
Nic złego z tą odpowiedzią, ale ng-init zawiódł mnie w moim konkretnym przypadku. Problem polegał na tym, że wartość, której używałem, nie była jeszcze dostępna w momencie uruchomienia ng-init: otrzymałem wartość poprzez wywołanie ajax i w tym momencie ng-init był już ukończony. W końcu użyłem obserwatora tej wartości i w tej funkcji zrobiłem to samo, co w ng-init. To się udało.
Maurits

2
Ja też miałem problemy z rozwiązaniem tego, komentarz @maurits doprowadził mnie do tego stackoverflow.com/questions/22348886 Enjoy!
Michael

5
Dokumentacja Angulara mówi, że lepiej używać zakresu $ kontrolera do inicjowania tego rodzaju wartości docs.quarejs.org/api/ng/directive/ngInit
Fortuna,

3
ostrzeżenie: użycie ng-init do tego celu może prowadzić do nadmiernego wywoływania metody $ digest (), co może powodować, że wyjście konsoli będzie wyglądać na czerwone i brzydkie z komunikatami typu „Osiągnięto iteracje 10 $ digest (). Przerwanie!”
DMac Niszczyciel

235

Jeśli chcesz mieć pewność, że twoja $scope.somethingHerewartość nie zostanie nadpisana podczas inicjalizacji widoku, będziesz chciał połączyć ( somethingHere = somethingHere || options[0].value) wartość w swojej ng-init w następujący sposób:

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

22
To rozwiązanie działało dobrze i jest lepsze niż wybrana odpowiedź.
MJ

czy ng-init nie powinien wyglądać tak jak ten ng-init = "somethingHere = somethingHere || options [0]" ??
infinitloop

1
Jak poradzić sobie z optionsbyciem pustym? Podobnie jak w przypadku optionsdanych pochodzących ze źródła zewnętrznego.
null

1
@suud wystarczy sprawdzić opcje && options.length> 0 w swoim ng-init. Naprawdę, większość tego należy wykonać w kontrolerze, więc można to przetestować.
Ben Lesh

@BenLesh Jeśli chcę napisać tekst (ciąg) zamiast pierwszej opcji. ng-init="somethingHere= somethingHere || 'Select one' " próbowałem w ten sposób. ale to nie zadziałało. co jest nie tak w moim kodzie
współtwórca

69

Spróbuj tego:

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

Jeśli naprawdę chcesz ustawić wartość, która zostanie powiązana z modelem, zmień ng-optionsatrybut na

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

i JavaScript do

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

Innym Plunker tutaj w związku z powyższym.


2
Problem polega na tym, że musiałbym to zrobić dla wielu wybranych pól.
iConnor,

Nie rozumiem Co byś musiał zrobić
Michael Benford,

Musiałbym to zrobić ręcznie dla może
ponad

Masz na myśli ustawienie wartości domyślnej dla każdego pola wyboru? Jeśli tak, to chyba nie jest jasne w twoim pytaniu. W każdym razie, czy mam rację, zakładając, że będziesz musiał załadować przedmioty do każdego pola wyboru? Jeśli tak, to nie sądzę, że zainicjowanie ich wartości domyślnych byłoby dużym problemem.
Michael Benford,

1
Mój problem polega na tym, że indeks opcji jest zwracany z „przesłania” formularza. Potrzebuję tego, co nazywasz option.name, czyli tego, co zostało zwrócone ze zwykłego starego formularza szynowego. Pole wyboru i przyciski opcji działają poprawnie, ponieważ używasz ng-repeat, aby uzyskać poprawne znaczniki. Jak uzyskać opcję Option.name zwróconą w momencie przesyłania formularza?
pferrel

40

Wspomniana tylko jedna odpowiedź Srivathsa Harish Venkataramana,track by która jest rzeczywiście rozwiązaniem tego problemu!

Oto przykład wraz z Plunkerem (link poniżej), jak używać track byw 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>

Jeśli selectedCityjest zdefiniowany w zakresie kątowym i ma idwłaściwość o takiej samej wartości jak iddowolna cityna citiesliście, zostanie on automatycznie wybrany przy ładowaniu.

Oto Plunker do tego: http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

Więcej informacji można znaleźć w dokumentacji źródłowej: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select


1
Dzięki, pomogło mi;)
Brahim LAMJAGUAR,

1
Niesamowite! Dzięki!
Iurii Golskyi,

33

Myślę, że po włączeniu funkcji „śledź przez” możesz użyć jej w opcjach ng, aby uzyskać to, czego chciałeś, na przykład:

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

Ten sposób na zrobienie tego jest lepszy, ponieważ jeśli chcesz zamienić listę ciągów na listę obiektów, po prostu to zmienisz

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

gdzie somethingHere to oczywiście obiekt o nazwie i id właściwości. Pamiętaj, że „as” nie jest używane w ten sposób do wyrażenia opcji ng, ponieważ spowoduje to jedynie ustawienie wartości i nie będzie można jej zmienić, jeśli korzystasz z funkcji śledzenia przez


To działało dla mnie. Myślę, że kątowy potrzebował czegoś, aby zidentyfikować obiekt w modelu mojego zakresu jako równoważny wyborowi listy referencyjnej. „Śledź według kodu gwaranta” załatwiło sprawę!
markbaldy

22

Zastosowano zaakceptowaną odpowiedź ng-init, ale dokument mówi, aby unikać ng-init, jeśli to możliwe.

Jedynym właściwym zastosowaniem ngInit jest aliasing specjalnych właściwości ngRepeat, jak pokazano w pokazie poniżej. Poza tym przypadkiem powinieneś używać kontrolerów zamiast ngInit do inicjalizacji wartości w zakresie.

Możesz także użyć ng-repeat zamiast ng-optionsopcji. Dzięki ng-repeatmożesz używać ng-selectedzng-repeat specjalnych właściwościach. tj. $ index, $ nieparzyste, $ nawet, aby to działało bez żadnego kodowania.

$first jest jedną z właściwości specjalnych powtórzeń ng.

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

---------------------- EDYCJA ----------------
Chociaż to działa, wolałbym @ mik-t odpowiedz, gdy wiesz, jaką wartość wybrać, https://stackoverflow.com/a/29564802/454252 , który używa track-byi ng-optionsnie używa ng-initlub ng-repeat.

Tej odpowiedzi należy używać tylko wtedy, gdy musisz wybrać pierwszy element, nie wiedząc, jaką wartość wybrać. np. używam tego do automatycznego uzupełniania, które wymaga ciągłego wybierania PIERWSZEGO elementu.


5
Działa, ale nie należy go używać, ponieważ ng-optionsjest szybszy i bardziej zoptymalizowany niż ng-repeat.
Iso

@Nie zgadzam się z tobą, ale czy masz źródło tych informacji?
Adam Plocher

1
Właśnie tutaj w dokumentacji: docs.quarejs.org/api/ng/directive/ngOptions „większa elastyczność w sposobie <select>przypisywania modelu za pomocą select aswyrażenia rozumienia”, „zmniejszone zużycie pamięci przez brak tworzenia nowego zakresu dla każde powtarzające się wystąpienie ”,„ zwiększono szybkość renderowania, tworząc opcje documentFragmentzamiast zamiast pojedynczo ”
Iso

16

Moim rozwiązaniem było użycie kodu HTML, aby zakodować moją domyślną opcję. Tak jak:

W 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

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

Chcę, aby moja domyślna opcja zwracała wszystkie wartości z mojego interfejsu API, dlatego mam pustą wartość. Przepraszam też za haml. Wiem, że nie jest to bezpośrednia odpowiedź na pytanie PO, ale ludzie znajdują to w Google. Mam nadzieję, że to pomaga komuś innemu.


1
Próbowałem przekonwertować to na HTML, ale nie udało się we wszystkich konwerterach online, które próbowałem.
iConnor

5
Dlaczego nie opublikować HTML? To znaczy, czy opublikowanie takiego kodu było naprawdę konieczne? To nie jest tak, że OP używał silnika templating w pytaniu.
arg20

14

Użyj poniższego kodu, aby wypełnić wybraną opcję ze swojego modelu.

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

Pracował dla mnie lekker. Wywołanie asynchroniczne odpowiedzialne za opcje wiązania dla mojej listy wyboru było trochę wolniejsze niż wywołanie modelu ng, więc takie podejście bardzo mi pomogło. Dzięki Eebbesen :-)
ajaysinghdav10d

To też działa dla mnie. Prosty i zrozumiały.
Kent Aguilar,

10

W zależności od liczby dostępnych opcji możesz umieścić swoje wartości w tablicy i automatycznie wypełnić te opcje w ten sposób

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

10

W moim przypadku musiałem wstawić wartość początkową tylko po to, aby powiedzieć użytkownikowi, aby wybrał opcję, więc podoba mi się poniższy kod:

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

Kiedy wypróbowałem opcję o wartości! = Pustego łańcucha (null), opcja została zastąpiona przez kąt, ale po umieszczeniu takiej opcji (z wartością null) wybierz pojawia się z tą opcją.

Przepraszam za mój zły angielski i mam nadzieję, że w czymś pomogę.


8

Korzystanie selectz ngOptionsi ustawianie wartości domyślnej:

Zobacz ngOptions dokumentacją więcej ngOptionsprzykładów wykorzystania.

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

Oficjalna dokumentacja oSELECTelemencieHTMLz kątowym wiązaniem danych.

Powiązanie selectz wartością ngModelnieciągową przez parsowanie / formatowanie:

(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

Inny przykład:

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


4

To zadziałało dla mnie.

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

3

W moim przypadku domyślna wartość różni się w zależności od przypadku w formularzu. Dodaję niestandardowy atrybut w tagu select.

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

w dyrektywach stworzyłem skrypt, który sprawdza wartość i kiedy wypełnia ją kątowo ustawia opcję z tą wartością na wybraną.

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

})

właśnie przetłumaczyłem to z coffescript w locie, przynajmniej pierwszy z nich jest poprawny, jeśli nie dziura.

To nie jest najprostszy sposób, ale zrób to, gdy wartość się zmienia


3

W odpowiedzi na odpowiedź Bena Lesha powinna istnieć ta linia

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

zamiast

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

To jest,

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


3

Po prostu użyj ng-selected="true"w następujący sposób:

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

2

Ustawiłbym model w kontrolerze. Następnie wybierz domyślnie tę wartość. Przykład: html:

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

Kontroler kątowy (za pomocą zasobu):

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


1

Jeśli używasz ng-optionsdo renderowania, rozwijana optionjest opcja domyślna, która ma taką samą wartość jak ng-modal. Rozważ przykład:

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

Tak więc opcja o tej samej wartości list.keyi selectedItemjest domyślnie wybrana.


1

Potrzebowałem domyślnego „Please Select”, aby nie można go było wybrać. Musiałem także móc warunkowo ustawić domyślną wybraną opcję.

Osiągnąłem to w następujący uproszczony sposób: kod JS: // Odwróć te 2, aby przetestować wybraną wartość domyślną lub brak wartości domyślnej z domyślnym tekstem „Proszę wybrać” //$scope.defaultOption = 0; $ scope.defaultOption = {klucz: „3”, wartość: „opcja 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>         

Mam nadzieję, że pomoże to komuś, kto ma podobne wymagania.

„Proszę wybrać” zostało osiągnięte dzięki odpowiedzi Joffreya Outtiera tutaj .


0

Jeśli masz coś zamiast zainicjować część z datą, możesz użyć ng-init(), zadeklarując to w kontrolerze i użyj go w górnej części kodu HTML. Ta funkcja będzie działać jak konstruktor kontrolera i możesz tam zainicjować zmienne.

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>

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

spróbuj tego w kontrolerze kątowym ...

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

Możesz ustawić wartość, ale używasz typu złożonego, a kątownik przeszuka klucz / wartość, aby ustawić w twoim widoku.

A jeśli nie działa, spróbuj tego: ng-options = "opcja.value as option.name dla opcji w opcjach śledź według opcji.name"


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.