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

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

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

При выборе элемента в раскрывающемся списке <select> элемент массива или свойство объекта, представленные выбранным элементом option, будут связаны с моделью, определённой директивой 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> выглядит как не имеющий выбранного значения.