Как установить опцию по умолчанию в поле выбора Angular.js

Я искал в Google и ничего не могу найти по этому вопросу.

У меня есть этот код.

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

С некоторыми данными, как это

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

И на выходе что-то вроде этого.

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

Как можно установить первый параметр в данных в качестве значения по умолчанию, чтобы получить такой результат.

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

Вы можете просто использовать ng-init, как это

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

Если вы хотите убедиться, что ваше $scope.somethingHereзначение не будет перезаписано при инициализации вашего представления, вы захотите coalesce ( somethingHere = somethingHere || options[0].value) значение в вашем ng-init следующим образом:

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

Попробуй это:

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

Плункер здесь .

Если вы действительно хотите установить значение, которое будет привязано к модели, измените ng-optionsатрибут на

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

и Javascript для

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

Еще один плункер здесь, учитывая вышеизложенное.

Только один ответ на Srivathsa Хариш Venkataramana упомянуто , track byкоторый действительно является решением для этого!

Вот пример вместе с Plunker (ссылка ниже) о том, как использовать track byв 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>

Если selectedCityон определен для угловой области, и у него есть idсвойство с тем же значением, что и idу любого cityв citiesсписке, он будет автоматически выбран при загрузке.

Вот Plunker для этого: http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

См. Исходную документацию для получения дополнительной информации: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select

Я думаю, что после включения «track by» вы можете использовать его в ng-options, чтобы получить то, что вы хотели, например, следующее

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

Этот способ лучше, потому что когда вы хотите заменить список строк списком объектов, вы просто измените его на

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

где что-то - это, конечно, объект со свойствами name и id. Обратите внимание, что «as» не используется в этом способе выражения параметров ng, потому что он будет устанавливать только значение, и вы не сможете изменить его, когда используете track by

Используется принятый ответ ng-init, но в документе говорится, что по возможности следует избегать ng-init.

Единственное подходящее использование ngInit для наложения псевдонимов специальных свойств ngRepeat, как показано в демонстрации ниже. Помимо этого случая, вы должны использовать контроллеры вместо ngInit для инициализации значений в области.

Вы также можете использовать ng-repeat вместо ng-optionsсвоих вариантов. С ng-repeat, вы можете использовать ng-selectedсо ng-repeatспециальными свойствами. т. е. $ index, $ odd, $ даже, чтобы это работало без какого-либо кодирования.

$first является одним из специальных свойств ng-repeat.

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

---------------------- РЕДАКТИРОВАТЬ ----------------
Хотя это работает, я бы предпочел @ mik-t's Ответьте, когда вы знаете, какое значение выбрать, https://stackoverflow.com/a/29564802/454252 , который использует track-byи ng-optionsбез использования ng-initили ng-repeat.

Этот ответ следует использовать только тогда, когда вы должны выбрать первый элемент, не зная, какое значение выбрать. Например, я использую это для автозаполнения, которое требует выбора пункта FIRST все время.

Мое решение этого было использовать 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 & ON

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

Я хочу, чтобы моя опция по умолчанию возвращала все значения из моего API, поэтому у меня есть пустое значение. Также извините мой хамл. Я знаю, что это не прямой ответ на вопрос ОП, но люди находят это в Google. Надеюсь, это поможет кому-то еще.

Используйте приведенный ниже код, чтобы заполнить выбранный вариант из вашей модели.

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

В зависимости от того, сколько вариантов у вас есть, вы можете поместить свои значения в массив и автоматически заполнить эти параметры, как это

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

В моем случае мне нужно было вставить начальное значение только для того, чтобы указать пользователю выбрать опцию, поэтому мне нравится код ниже:

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

Когда я попробовал параметр со значением! = Пустой строки (null), параметр был заменен на угловой, но, если поставить параметр, подобный этому (со значением NULL), выберите apear с этим параметром.

Извините за мой плохой английский, и я надеюсь, что помогу с этим.

Использование selectс ngOptionsи установка значения по умолчанию:

См. Документацию ngOptions для большего количества 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

Официальная документация обSELECTэлементеHTMLс угловой привязкой данных.

Привязка selectк нестроковому значению посредством ngModelразбора / форматирования:

(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

Другой пример:

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

Это сработало для меня.

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

В моем случае, так как по умолчанию меняется от случая к случаю в форме. Я добавляю пользовательский атрибут в тег выбора.

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

в директивах я создал скрипт, который проверяет значение, и когда angular заполняет его, устанавливает параметр с этим значением в выбранный.

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

})

только что перевел это из coffescript на лету, по крайней мере, суть его правильна, если не дырка.

Это не самый простой способ, но сделать это, когда значение меняется

В ответ на ответ Бена Леша должна быть эта строка

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

вместо того

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

То есть,

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

Просто используйте ng-selected="true"следующее:

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

Я бы установил модель в контроллере. Тогда выбор будет по умолчанию для этого значения. Пример: html:

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

Угловой контроллер (используя ресурс):

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

Это работает для меня

ng-selected="true" 

Если вы используете ng-optionsдля рендеринга выпадающий, то по optionумолчанию выбрано то же значение, что и для ng-modal. Рассмотрим пример:

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

Таким образом, опция, имеющая то же значение list.keyи selectedItem, выбрана по умолчанию.

Мне нужно было по умолчанию «Пожалуйста, выберите», чтобы быть недоступным для выбора. Мне также нужно было иметь возможность условно установить выбранную по умолчанию опцию.

Я добился этого следующим упрощенным способом: код JS: // перевернуть эти 2, чтобы проверить выбранное значение по умолчанию или нет по умолчанию с текстом «Please Select» по умолчанию //$scope.defaultOption = 0; $ scope.defaultOption = {ключ: '3', значение: 'Вариант 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>         

Я надеюсь, что это помогает кому-то еще, у которого есть подобные требования.

«Пожалуйста, выберите» было выполнено через ответ Джоффри Ауттиера здесь .

Если у вас есть какая-то вещь вместо инициализации части даты, вы можете использовать ng-init()ее, объявив ее в своем контроллере, и использовать ее в верхней части HTML. Эта функция будет работать как конструктор для вашего контроллера, и вы можете инициировать свои переменные там.

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>

попробуйте это в вашем угловом контроллере ...

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

Вы можете установить значение, но вы используете сложный тип, и угловой будет искать ключ / значение для установки в вашем представлении.

И, если не работает, попробуйте это: ng-options = "option.value как option.name для опции в опциях, отслеживаемых по option.name"

Я думаю, что самый простой способ

 ng-selected="$first"