Я читав про це в інших постах, але не міг зрозуміти, що це таке.
У мене є масив,
$scope.items = [
{ID: '000001', Title: 'Chicago'},
{ID: '000002', Title: 'New York'},
{ID: '000003', Title: 'Washington'},
];
Я хочу відобразити його як:
<select>
<option value="000001">Chicago</option>
<option value="000002">New York</option>
<option value="000003">Washington</option>
</select>
А також я хочу вибрати варіант з ID=000002.
Я прочитав select і спробував, але не можу розібратися.
Слід зазначити, що ngModel є обов'язковим для роботи ngOptions... зверніть увагу на ng-model="blah"
, що означає "встановити $scope.blah у вибране значення".
Спробуйте зробити так:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Ось більше інформації з документації AngularJS (якщо ви її ще не бачили):
для джерел даних масиву:
- мітка для значення в масиві
- вибрати як мітку для значення в масиві
- мітка по групах для значення в масиві = вибрати як мітку групу за групою для значення в масиві
для об'єктних джерел даних:
- мітка for (ключ , значення) в об'єкті
- вибрати як мітку для (ключ , значення) в об'єкті
- мітка по групах для (ключ, значення) в об'єкті
- вибрати як мітку групу за групою для (ключ, значення) в об'єкті
Деяке роз'яснення щодо значень тегів опцій в AngularJS:
Коли ви використовуєте ng-options
, значення тегів опцій, виписаних 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
, який встановлює модель (з 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 як дочірній до вашого select, з порожнім атрибутом 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>
Я вивчаю AngularJS і теж зіткнувся з проблемою виділення. Знаю, що на це питання вже є відповідь, але все ж хотілося б поділитися ще трохи кодом.
У моєму тесті є два списки: марки автомобілів та моделі автомобілів. Список моделей не відображається до тих пір, поки не буде вибрано якусь марку. Якщо вибір у списку марок пізніше скидається (встановлюється на 'Вибрати марку'), то список моделей знову стає відключеним, і його вибір також скидається (на 'Вибрати модель'). Марки отримуються як ресурс, тоді як моделі просто жорстко кодуються.
[
{"code": "0", "name": "Select Make"},
{"code": "1", "name": "Acura"},
{"code": "2", "name": "Audi"}
]
angular.module('makeServices', ['ngResource']).
factory('Make', function($resource){
return $resource('makes.json', {}, {
query: {method:'GET', isArray:true}
});
});
<div ng:controller="MakeModelCtrl">
<div>Make</div>
<select id="makeListBox"
ng-model="make.selected"
ng-options="make.code as make.name for make in makes"
ng-change="makeChanged(make.selected)">
</select>
<div>Model</div>
<select id="modelListBox"
ng-disabled="makeNotSelected"
ng-model="model.selected"
ng-options="model.code as model.name for model in models">
</select>
</div>
function MakeModelCtrl($scope)
{
$scope.makeNotSelected = true;
$scope.make = {selected: "0"};
$scope.makes = Make.query({}, function (makes) {
$scope.make = {selected: makes[0].code};
});
$scope.makeChanged = function(selectedMakeCode) {
$scope.makeNotSelected = !selectedMakeCode;
if ($scope.makeNotSelected)
{
$scope.model = {selected: "0"};
}
};
$scope.models = [
{code:"0", name:"Select Model"},
{code:"1", name:"Model1"},
{code:"2", name:"Model2"}
];
$scope.model = {selected: "0"};
}
В CoffeeScript:
#directive
app.directive('select2', ->
templateUrl: 'partials/select.html'
restrict: 'E'
transclude: 1
replace: 1
scope:
options: '='
model: '='
link: (scope, el, atr)->
el.bind 'change', ->
console.log this.value
scope.model = parseInt(this.value)
console.log scope
scope.$apply()
)
<!-- HTML partial -->
<select>
<option ng-repeat='o in options'
value='{{$index}}' ng-bind='o'></option>
</select>
<!-- HTML usage -->
<select2 options='mnuOffline' model='offlinePage.toggle' ></select2>
<!-- Conclusion -->
<p>Sometimes it's much easier to create your own directive...</p>