Стоит отметить, что ngModel требуется для работы ngOptions ... обратите внимание на то, ng-model="blah"
что говорится "установите $ scope.blah в выбранное значение".
Попробуй это:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Вот еще из документации AngularJS (если вы ее еще не видели):
для источников данных массива:
- метка для значения в массиве
- выбрать в качестве метки для значения в массиве
- метка группа по группе для значения в массиве = выбрать как метка группа по группе для значения в массиве
для источников данных объекта:
- метка для (ключ, значение) в объекте
- выбрать в качестве метки для (ключ, значение) в объекте
- пометить группу за группой для (ключ, значение) в объекте
- выбрать в качестве метки группу по группе для (ключ, значение) в объекте
Для пояснения значений тегов опций в AngularJS:
При использовании ng-options
, значение опций тегов выписало нг-вариантами всегда будет индексом элемента массива дополнительный тег относится к . Это связано с тем, что AngularJS фактически позволяет вам выбирать целые объекты с элементами управления select, а не только примитивные типы. Например:
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }
];
});
<div ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
<pre>{{selectedItem | json}}</pre>
</div>
Вышеизложенное позволит вам выделить весь объект $scope.selectedItem
напрямую. Дело в том, что с AngularJS вам не нужно беспокоиться о том, что находится в вашем теге option. Пусть AngularJS справится с этим; Вы должны заботиться только о том, что находится в вашей модели в вашем объеме.
Вот плункер, демонстрирующий поведение выше и показывающий выписанный HTML
Работа с опцией по умолчанию:
Есть несколько вещей, которые я не упомянул выше, касающихся опции по умолчанию.
Выбор первого варианта и удаление пустого параметра:
Вы можете сделать это, добавив простое, ng-init
которое устанавливает модель (from ng-model
) для первого элемента в элементах, которые вы повторяете ng-options
:
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
Примечание: это может стать немного сумасшедшим, если foo
случится, что он правильно инициализирован для чего-то «ложного». В этом случае вы foo
, скорее всего, захотите обработать инициализацию в вашем контроллере.
Настройка опции по умолчанию:
Это немного по-другому; здесь все, что вам нужно сделать, это добавить тег option как дочерний элемент вашего выбора с пустым атрибутом value, а затем настроить его внутренний текст:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
Примечание. В этом случае «пустая» опция останется там даже после выбора другой опции. Это не относится к поведению по умолчанию выбора в AngularJS.
Настраиваемая опция по умолчанию, которая скрывается после выбора:
Если вы хотите, чтобы настроенная опция по умолчанию исчезла после выбора значения, вы можете добавить атрибут ng-hide к опции по умолчанию:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="" ng-if="foo">Select something to remove me.</option>
</select>