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

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

Обзор

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эта директива выполняется на уровне приоритета 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 истинно. Используйте 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–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 3.0.
https://code.angularjs.org/1.8.2/docs/api/ng/directive/select