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

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

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

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

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

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

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

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