Улучшить эту документацию Просмотреть исходный код select

директива в модуле ng

Обзор

HTML select элемент с привязкой данных AngularJS.

Директива select используется вместе с ngModel для обеспечения привязки данных между областью видимости и элементом управления <select> (включая установку значений по умолчанию). Она также обрабатывает динамические <option> элементы, которые можно добавить с помощью директивы ngRepeat или ngOptions.

При выборе элемента в <select> меню значение выбранного элемента будет привязано к модели, определенной директивой ngModel. В случае статических или повторяющихся элементов, это содержимое атрибута value или содержимое <option>, если атрибут value отсутствует. Значение и содержимое могут быть интерполированы.

Контроллер select controller предоставляет вспомогательные функции, которые можно использовать для управления поведением select.

Сопоставление модели и значений опций

В общем случае соответствие между моделью и опцией определяется путем строгого сравнения значения модели со значениями доступных опций.

Если вы задаёте значение опции с помощью атрибута value опции или содержимого, значение всегда будет строкой, что означает, что значение модели также должно быть строкой. В противном случае директива select не сможет правильно их сопоставить.

Для привязки модели к значению, отличном от строки, можно использовать один из следующих подходов:

директива ngOptions (select)
директива ngValue, которая позволяет использовать произвольные выражения в качестве значений опций (Пример)
модель $parsers / $formatters для преобразования строкового значения (Пример)

Если viewValue ngModel не совпадает ни с одной из опций, элемент управления автоматически добавляет опцию "неизвестно", которую затем удаляет при устранении несоответствия.

Необязательно, в элемент <select> можно вложить один жестко заданный элемент <option>, значение которого установлено в пустую строку. Этот элемент будет представлять null или "не выбранный" элемент. Пример показан ниже.

Выбор между ngRepeat и ngOptions

Во многих случаях директива ngRepeat может использоваться на <option> элементах вместо ngOptions для достижения аналогичного результата. Однако ngOptions предоставляет некоторые преимущества:

большая гибкость в способе назначения модели <select> через часть выражения comprehensions select as
снижение потребления памяти, так как не создаётся новая область видимости для каждого повторяющегося экземпляра
увеличение скорости отрисовки, так как опции создаются в документе-фрагменте вместо индивидуального создания

В частности, select с повторяющимися опциями значительно замедляет работу в Chrome и Internet Explorer / Edge, начиная с 2000 опций.

Информация о директиве

Эта директива выполняется на уровне приоритета 0.

Использование

как элемент:

<select
  ng-model="string"
  [name="string"]
  [multiple="string"]
  [required="string"]
  [ng-required="string"]
  [ng-change="string"]
  [ng-options="string"]
  [ng-attr-size="string"]>
...
</select>

Аргументы

Параметр	Тип	Описание
ngModel	`string`	Присваиваемое выражение AngularJS для привязки данных.
name (необязательно)	`string`	Имя свойства формы, в котором публикуется элемент управления.
multiple (необязательно)	`string`	Разрешает выбор нескольких опций. Выбранные значения будут привязаны к модели как массив.
required (необязательно)	`string`	Устанавливает код валидации `required` в случае отсутствия ввода.
ngRequired (необязательно)	`string`	Добавляет атрибут required и ограничение валидации required к элементу, когда выражение ngRequired принимает значение true. Используйте ngRequired вместо required, когда вы хотите привязать атрибут required.
ngChange (необязательно)	`string`	Выражение AngularJS, которое будет выполняться при изменении выбранной(ых) опции(й) из-за взаимодействия пользователя с элементом select.
ngOptions (необязательно)	`string`	устанавливает опции, которыми заполняется элемент select, и определяет, что устанавливается в модели при выборе. См. `ngOptions`.
ngAttrSize (необязательно)	`string`	динамически устанавливает размер элемента select. Использует директиву ngAttr.

Примеры

Простые элементы select со статическими опциями

Использование ngRepeat для генерации опций select

Использование ngValue для привязки модели к массиву объектов

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

Для получения дополнительных примеров использования см. документацию ngOptions.

Привязка select к значению, отличному от строки, через ngModel парсинг/форматирование

© 2010–2018 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.7.8/docs/api/ng/directive/select