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

Если вы хотите убедиться, что ваш $scope.somethingHere значение не перезаписывается при инициализации представления, вы захотите объединить (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];
}

Plunker здесь.

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

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

и Javascript для

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

Другое Plunker здесь учитывая вышесказанное.

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

вот пример вместе с Plunker (ссылка ниже) о том, как использовать track by на выберите 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 свойство с тем же значением, что и any 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-options, потому что он будет устанавливать только значение и вы не сможете изменить его, когда вы используете трек

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

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

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

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

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

---------------------- изменить ----------------
Хотя это работает, я бы предпочел ответ @mik-t, когда вы знаете, какое значение выбрать,https://stackoverflow.com/a/29564802/454252, который использует track-by и ng-options без использования ng-init или ng-repeat.

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

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

в 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

в 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, поэтому у меня есть пустое значение. Также извините моего хэмла. Я знаю, что это не прямой ответ на вопрос OP, но люди находят это в 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) опция была заменена угловой, но, когда поставить такую опцию (с нулевым значением), выберите 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>

плнкр.co

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

обязательные 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>

плнкр.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.

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

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

 .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-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, выбран по умолчанию.

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

ng-selected="true" 

Если у вас есть что-то вместо того, чтобы просто ввести часть даты, вы можете использовать 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>

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

 ng-selected="$first"

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

Я достиг этого следующим упрощенным способом: JS код : // Переверните эти 2, чтобы проверить выбранное значение по умолчанию или нет по умолчанию с текстом "Пожалуйста, выберите" //$масштаб.defaultOption = 0; $масштаб.defaultOption = { key: '3', value: '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>         

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

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

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

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

$somethingHere = {name: 'что-то классное'};

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

и, если не работает, попробуйте эту : ng-options= " option.значение как вариант.имя опции в опции track by option.имя"

лучший и самый простой способ (Обновлено)