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

Обзор

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

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

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

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

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

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

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

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

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

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

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

select as

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