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

HTML SELECT элемент с привязкой данных Angular.

ngOptions

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

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

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

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

select as

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

select as и track by

Рассмотрим следующий пример:

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

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

$scope.selected = { name: 'aSubItem' };

В целях сохранения выбора, выражение track by всегда применяется к элементу источника данных (к item в этом примере). Для вычисления того, выбран ли элемент, мы делаем следующее:

1. Примените track by к элементам в массиве. В примере: [1, 2]
2. Примените track by к уже выбранному значению в ngModel. В примере: это невозможно, так как track by относится к item.id, но выбранное значение из ngModel равно {name: 'aSubItem'}, поэтому выражение track by применяется к неправильному объекту, выбранный элемент не может быть найден, <select> всегда сбрасывается на опцию "не выбрано".