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

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

Обзор

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

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

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

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

Сопоставление значения модели и значения элемента

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

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

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

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

Если значение viewValue ngModel не совпадает ни с одним из элементов, элемент управления автоматически добавит элемент «неизвестно», а затем удалит его, когда несоответствие будет устранено.

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

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

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

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

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

Известные проблемы

В Firefox модель select обновляется только при потере фокуса элементом select. Например, при переключении между элементами с помощью клавиатуры, модель select устанавливается на текущий выбранный элемент только при потере фокуса элементом select, например, при нажатии клавиши Tab или щелчке мышью вне select.

Это связано с неоднозначностью в спецификации элемента select. Более подробную информацию см. в задаче в отслеживателе ошибок Firefox, а также в этом комментарии на GitHub для решения проблемы

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

Эта директива выполняется на уровне приоритета 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 для ngOptions дополнительных примеров использования.

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

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