Установка выбора по умолчанию в select box Angular.js

Быстрый ответ

Для того чтобы задать значение по умолчанию в выпадающем списке Angular.js, присвойте модели нужное значение. Это значение должно соответствовать одному из элементов списка ваших опций. Вот пример:

$scope.options = [
  { id: 'option1', name: 'Первая опция' },
  // Добавьте свои варианты...
];
$scope.selectedOption = $scope.options[0]; // Устанавливаем первую опцию в качестве значения по умолчанию

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

ng-model синхронизирована с id одного из элементов массива $scope.options, и именно этот элемент отображается в списке выбранным по умолчанию.

Управление динамическими опциями при помощи ng-init

Если ваши опции формируются динамически или зависят от данных, загружаемых асинхронно, используйте ng-init для задания начального значения:

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

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

Особенности использования ng-options для полного контроля

Привязка по ключу: 'track by'

Для точного контроля, особенно при работе с уникальными идентификаторами, используйте подвыражение track by внутри директивы ng-options:

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

Подробнее об этом расскажет наш спикер на видео

Асинхронные данные? Нет проблем!

При работе с асинхронными данными убедитесь, что ng-model корректно сопоставляется с элементом из списка опций. Вы можете отслеживать изменения при помощи $scope.$watch или инициализировать ng-model через callback-функцию.

Исключим неопределенный выбор "?"

В некоторых случаях выпадающий список может отображать неопределенный выбор (? value ?). Это происходит, когда Angular не может связать selectedOption с элементом из списка. Инициализация selectedOption корректным объектом из массива опций поможет решить эту проблему.

Визуализация

Вероятно, у вас есть список покупок:

Выпадающий список (🔽):
| Опция             | Товары           |
| ----------------- | ---------------- |
| Выбрано по умолчанию 🌟 | 🍎 Яблоки         |
| Вариант 1         | 🍅 Помидоры       |
| Вариант 2         | 🌽 Кукуруза       |

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

<select ng-model="grocery" ng-init="grocery=grocery || groceries[0].id"
        ng-options="item.name for item in groceries track by item.id">
  <!-- Angular позаботится о всем остальном! -->
</select>

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

Нужна ли гибкость? Реализуйте функцию инициализации

Если вам требуется более сложная логика инициализации, вы можете воспользоваться функцией JavaScript:

$scope.setDefaultOption = function(options) {
  // Если опций нет, возвращаем null. В противном случае выбираем первую опцию.
  return options.length > 0 ? options[0] : null;
};
$scope.selectedOption = $scope.setDefaultOption($scope.options);

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

Полезные материалы

1. Директива ngOptions AngularJS — официальная документация AngularJS, которая научит вас эффективно использовать директиву ngOptions.
2. Почему AngularJS добавляет пустой элемент в select? – Stack Overflow — обсуждение на Stack Overflow о причинах добавления AngularJS пустого выбора в элемент select и способах управления этим.
3. Директива select в AngularJS — официальная документация AngularJS о работе с drop-down списками.
4. Примеры выпадающих списков в AngularJS — примеры создания выпадающих списков с предварительно заданными значениями в AngularJS.
5. Динамические формы в Angular – Angular University — подробное описание создания динамических опций и форм в Angular.
6. Краткое руководство по ng-options в AngularJS — обзор использования ng-options и его возможностей в AngularJS.
7. Многоразовые компоненты AngularJS с bindToController — разработка многократно используемых компонентов для улучшения директив в AngularJS.