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

Обзор

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

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

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

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