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


311

Я искал в 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>

3
Было бы хорошо, если бы был ответ, который не предполагал, что angular использовался для построения опций. Что если опции уже являются частью разметки?
pspahn

1
@pspahn - согласно docs.angularjs.org/api/ng/directive/ngOptions : только a **single** hard-coded <option> element ... can be nested into the <select> element.параметры не могут быть частью разметки.
Жнец DIMM

1
@pspahn, который не ответил бы на ОП, но совсем другой вопрос ...
Марио Трукко

Ответы:


366

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

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

20
У меня была проблема с этой работой, это было то, что я использовал 'track by', устранение его устранило проблему, на тот случай, если это поможет кому-то в дальнейшем: D
DrCord

61
В этом ответе нет ничего плохого, но в моем конкретном случае мне не удалось выполнить ng-init. Проблема заключалась в том, что используемое мной значение еще не было доступно во время выполнения ng-init: я получил значение с помощью вызова ajax, и в этот момент ng-init был уже завершен. В конце я использовал наблюдатель для этого значения, и в этой функции я сделал то же самое, что и в ng-init. Это сработало.
Maurits

2
У меня тоже были проблемы с этим, @maurits комментарий привел меня к этому stackoverflow.com/questions/22348886 Наслаждайтесь!
Майкл

5
Документация Angular говорит, что лучше использовать контроллер $ scope для инициализации таких значений docs.angularjs.org/api/ng/directive/ngInit
Fortuna

3
предупреждение: использование ng-init для этой цели может привести к чрезмерным вызовам метода $ digest (), что может привести к тому, что вывод вашей консоли будет выглядеть красным и безобразным с сообщениями, такими как "10 $ digest (). Итерации достигнуты. Прерывание!"
DMac the Destroyer

235

Если вы хотите убедиться, что ваше $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>

22
Это решение сработало хорошо и лучше, чем выбранный ответ.
MJ

не должен ли ng-init выглядеть так: ng-init = "thingHere =thingHere || options [0] "??
infinitloop

1
Как бороться с optionsтем, чтобы быть пустым? Как в случае, если optionsданные поступают из внешнего источника.
ноль

1
@suud, вам просто нужно проверить параметры && options.length> 0 в вашем ng-init. Действительно, большая часть этого должна быть сделана в вашем контроллере, так что это можно проверить.
Бен Леш

@BenLesh Если я хочу написать текст (строку) вместо первого варианта. ng-init="somethingHere= somethingHere || 'Select one' " Я пытался так. но это не сработало. что не так в моем коде
codelearner

69

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

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;

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


2
Проблема в том, что мне придется сделать это для множества ящиков выбора.
iConnor

Не понял Что бы вы сделали?
Майкл Бенфорд

Я должен был бы сделать это вручную, возможно, для 50+ ящиков выбора
iConnor

Вы имеете в виду установку значения по умолчанию для каждого поля выбора? Если так, я думаю, это не ясно в вашем вопросе. В любом случае, правильно ли я предположить, что вам придется загружать элементы в каждое поле выбора? Если это так, я не думаю, что инициализация их значений по умолчанию будет иметь большое значение.
Майкл Бенфорд

1
Моя проблема заключается в том, что индекс опции возвращается из «представить» в форме. Что мне нужно, это то, что вы называете option.name, то есть то, что было возвращено из простой старой формы rails. Флажок и переключатели работают нормально, так как вы используете ng-repeat для получения правильной разметки. Как получить option.name, возвращаемое во время отправки формы?
pferrel

40

Только один ответ на 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


1
Спасибо, это помогло мне;)
Брахим LAMJAGUAR

1
Потрясающие! Спасибо!
Юрий Гольский

33

Я думаю, что после включения «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


Это то, что сработало для меня. Я думаю, что angular нужно что-то, чтобы идентифицировать объект в модели моей области как эквивалент выбора списка ссылок. "track by guarantor.code" сделал свое дело!
Markbaldy

22

Используется принятый ответ 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 все время.


5
Это работает, но не должно использоваться как ng-optionsбыстрее и более оптимизировано, чем ng-repeat.
Iso

@ Я с тобой не согласен, но есть ли у тебя источник этой информации?
Адам Плохер

1
Прямо здесь, в документации: docs.angularjs.org/api/ng/directive/ngOptions «большая гибкость в <select>назначении модели через select asчасть выражения понимания», «сокращение потребления памяти за счет отсутствия новой области видимости для каждый повторяющийся экземпляр »,« повышенная скорость рендеринга за счет создания опций documentFragmentвместо отдельных »
Iso

16

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

В 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. Надеюсь, это поможет кому-то еще.


1
Я пытался преобразовать это в HTML, но это не удалось во всех онлайн-конвертеры, которые я пробовал.
iConnor

5
Почему бы не опубликовать HTML? Я имею в виду, действительно ли было необходимо опубликовать такой код? Это не так, как OP использовал шаблонный движок в этом вопросе.
arg20

14

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

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

Работал леккер у меня. Асинхронный вызов, отвечающий за параметры привязки для моего списка выбора, был немного медленнее, чем тот, который принес ng-модель, поэтому этот подход мне очень помог. Спасибо Eebbesen :-)
ajaysinghdav10d

Это работает и для меня. Просто и понятно.
Кент Агилар

10

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

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

10

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

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

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

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


8

Использование 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


4

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

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

3

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

 <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 на лету, по крайней мере, суть его правильна, если не дырка.

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


3

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

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>


3

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

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

2

Я бы установил модель в контроллере. Тогда выбор будет по умолчанию для этого значения. Пример: 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
  }
});


1

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


1

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

Я добился этого следующим упрощенным способом: код 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>         

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

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


0

Если у вас есть какая-то вещь вместо инициализации части даты, вы можете использовать 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>

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

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

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

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

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


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.