Варто зазначити одне, що ngModel необхідний для роботи ngOptions ... зауважте, ng-model="blah"
що йдеться про "встановити $ range.blah на вибране значення".
Спробуйте це:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Ось більше з документації AngularJS (якщо ви її ще не бачили):
для джерел даних масиву:
- мітка для значення масиву
- вибрати як мітку для значення масиву
- label group by group for value in array = вибрати як групу label для групи для значення у масиві
для об'єктів даних:
- мітка для (ключ, значення) в об'єкті
- вибрати як мітку для (ключ, значення) в об'єкті
- група міток по групі для (ключ, значення) в об'єкті
- вибрати як групу міток по групі для (ключ, значення) в об'єкті
Щоб отримати уточнення щодо значень тегів опцій у AngularJS:
При використанні ng-options
, значення опцій тегів виписало нг-варіантами завжди буде індексом елемента масиву додатковий тег відноситься до . Це тому, що AngularJS насправді дозволяє вибирати цілі об’єкти з елементами управління, а не лише примітивними типами. Наприклад:
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 вам не потрібно турбуватися про те, що є у вашому тегу опцій. Нехай AngularJS це впорається; вам слід дбати лише про те, що є у вашій моделі у вашому обсязі.
Ось планкер, що демонструє поведінку вище та показує HTML, виписаний
Робота з опцією за замовчуванням:
Є кілька речей, які я не зміг згадати вище, що стосуються параметра за замовчуванням.
Вибір першого варіанта та видалення порожнього параметра:
Це можна зробити, додавши простий, ng-init
який встановлює модель (від 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
у своєму контролері.
Налаштування параметру за замовчуванням:
Це трохи інакше; тут все, що вам потрібно зробити, - додати тег параметрів як дочірній вибір за допомогою вибраного атрибута порожнього значення, а потім налаштувати його внутрішній текст:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
Примітка. У цьому випадку опція "порожній" залишиться там навіть після вибору іншої опції. Це не так у випадку поведінки вибраних за замовчуванням у програмі AngularJS.
Налаштований параметр за замовчуванням, який ховається після вибору:
Якщо ви хочете, щоб ваш індивідуальний параметр за замовчуванням пішов після вибору значення, ви можете додати атрибут ng сховати до параметра за замовчуванням:
<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>