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

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>

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>

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>

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.

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

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

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.

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

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>

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>

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

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

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>

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

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>

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>

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

To działa dla mnie

ng-selected="true" 

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.

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 .

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>

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

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"

Myślę, że najłatwiej jest

 ng-selected="$first"