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

Обзор

Атрибут ngOptions может использоваться для динамической генерации списка элементов <option> для элемента <select> с использованием массива или объекта, полученного путем вычисления выражения понимания ngOptions.

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

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

При выборе элемента в меню <select>, элемент массива или свойство объекта, представленные выбранным вариантом, будут привязаны к модели, определённой директивой ngModel.

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

Сложные модели (объекты или коллекции)

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

Возникает проблема, если вы хотите предварительно выбрать вариант. Например, если вы установите модель в объект, равный объекту в вашей коллекции, ngOptions не сможет установить выбор, так как объекты не идентичны. Поэтому по умолчанию всегда следует ссылаться на элемент в вашей коллекции для предварительных выборов, например: $scope.selected = $scope.collection[3].

Другое решение — использование track by-закрытия, так как тогда ngOptions будет отслеживать идентичность элемента не по ссылке, а по результату выражения track by. Например, если элементы вашей коллекции имеют свойство id, вы бы track by item.id.

Ещё одна проблема с объектами или коллекциями заключается в том, что ngModel не определит, если свойство объекта или элемент коллекции изменяются. По этой причине ngOptions дополнительно отслеживает модель с использованием $watchCollection, когда выражение содержит track by-закрытие или выбор имеет атрибут multiple. Это позволяет ngOptions вызывать повторное отображение вариантов даже если сам объект/коллекция не изменился по идентичности, но изменяется только свойство объекта или элемент коллекции.

Обратите внимание, что $watchCollection выполняет поверхностное сравнение свойств объекта (или элементов коллекции, если модель является массивом). Это означает, что изменение свойства, расположенного глубже первого уровня внутри объекта/коллекции, не вызовет повторное отображение.

select as

Использование select as привяжет результат выражения select к модели, но значение элементов html <select> и <option> будет либо индексом (для источников данных массивов) или именем свойства (для источников данных объектов) значения в коллекции. Если используется выражение track by, результат этого выражения будет установлен как значение элементов option и select.

select as и track by

Учитывая этот массив элементов в $scope:

$scope.items = [{
  id: 1,
  label: 'aLabel',
  subItem: { name: 'aSubItem' }
}, {
  id: 2,
  label: 'bLabel',
  subItem: { name: 'bSubItem' }
}];

Это будет работать:

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>

$scope.selected = $scope.items[0];

но это не будет работать:

<select ng-options="item.subItem as item.label for item in items track by item.id" ng-model="selected"></select>

$scope.selected = $scope.items[0].subItem;

В обоих примерах выражение track by успешно применяется к каждому item в массиве items. Поскольку выбранный вариант был задан программно в контроллере, выражение track by также применяется к значению ngModel. В первом примере значение ngModel равно items[0], а выражение track by вычисляет значение items[0].id без проблем. Во втором примере значение ngModel равно items[0].subItem, а выражение track by вычисляет значение items[0].subItem.id (которое является неопределённым). В результате значение модели не соответствует ни одному <option>, и <select> отображается как не имеющий выбранного значения.