Я читал об этом в других сообщениях, но не мог понять.
У меня есть массив,
$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 (если вы ее еще не видели):
для источников данных в виде массивов:
- метка для значения в массиве
- select as label для значения в массиве
- label group by group для значения в массиве = select as label group by group for value in array
для объектных источников данных:
- label for (key , value) in object
- select as label for (key , value) in object
- label group by group for (key, value) in object
- select as label group by group for (key, value) in object
Для некоторых пояснений по значениям тегов опций в 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"};
}
Почему AngularJS не позволяет вам меня путать. Их документации довольно ужасно на это. Больше хороших примеров вариаций будет приветствоваться.
Во всяком случае, у меня небольшая вариация на Бен Леш'ы ответ.
В моей коллекции данных выглядит так:
items =
[
{ key:"AD",value:"Andorra" }
, { key:"AI",value:"Anguilla" }
, { key:"AO",value:"Angola" }
...etc..
]
Сейчас
<select ng-model="countries" ng-options="item.key as item.value for item in items"></select>
все равно приводили к стоимости варианта индекса (0, 1, 2, и т. д.).
Добавление трек исправлено это для меня:
<select ng-model="blah" ng-options="item.value for item in items track by item.key"></select>
Я считаю, что чаще бывает так, что вы хотите добавить массив объектов в списке выбора, так что я буду помнить это!
Помните, что в AngularJS от 1.4 вы можете'т использовать НГ-варианты, но вы должны использовать НГ-повторите на ваш вариант тега:
<select name="test">
<option ng-repeat="item in items" value="{{item.key}}">{{item.value}}</option>
</select>
На вопрос уже ответил (кстати, очень хороший и исчерпывающий ответ, предоставляемые Бен), но я бы хотел добавить еще один элемент для полноты, которая может быть весьма удобна.
В пример, предложенный Беном:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
следующие ngOptions форма была использована: выберите в качестве метки для значения в массиве
.
Этикетки - это выражение, результат которого будет надпись в <параметр>
элемент. В этом случае вы можете выполнять определенные сцепление, для того чтобы иметь более сложный вариант этикетки.
Примеры:
НГ-параметры="в пункт.Идентификатор элемента.Название + ' - ' + пункт.Идентификатор для элемента в детали" и дает вам ярлыки, такие как
заголовок - идентификатор`НГ-параметры="в пункт.Идентификатор элемента.Название + ' (' + пункт.Название.длина + ')' для товара в элементы и" дает вам ярлыки, такие как "титул" (х)
, где X
- длина строки заголовка.Вы также можете использовать фильтры, например,
НГ-параметры="в пункт.Идентификатор элемента.Название + ' (' + (пункт.Название | заглавными) + ')' для товара в элементы и" дает вам ярлыки, такие как
заголовок (название), где название значение название отеля и название имеет то же значение, но преобразуется в верхний регистр.НГ-параметры="в пункт.Идентификатор элемента.Название + ' (' + (пункт.SomeDate | дата) + ')' для товара в элементы и" дает вам ярлыки, такие как "титул" (27 сентября 2015)
, Если ваша модель имеет свойство SomeDate
В 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>
Если вам нужно пользовательское название для каждого параметра, `НГ-вариантов не применим. Вместо того, чтобы использовать НГ-повторите с параметрами:
<select ng-model="myVariable">
<option ng-repeat="item in items"
value="{{item.ID}}"
title="Custom title: {{item.Title}} [{{item.ID}}]">
{{item.Title}}
</option>
</select>
Я надеюсь, что следующий будет работать для вас.
<select class="form-control"
ng-model="selectedOption"
ng-options="option.name + ' (' + (option.price | currency:'USD$') + ')' for option in options">
</select>
Это может быть полезно. Привязки не всегда работают.
<select id="product" class="form-control" name="product" required
ng-model="issue.productId"
ng-change="getProductVersions()"
ng-options="p.id as p.shortName for p in products"></select>
Например, вы заполняете список опций модели источник из службы REST. Выбранное значение было известно перед заполнением список, и он был установлен. После выполнения запроса отдыха с $HTTP, то вариант списка будет сделано.
Но выбранная опция не установлена. По неизвестным причинам в AngularJS в тени $дайджест-исполнителем не привязывает выбранный, как это должно быть. Я должен использовать jQuery, чтобы установить выбранный. Это важно! В AngularJS, в тень, добавляет префикс к значению, в том, что "ценности" и для генерируемых НГ-повторите вариантов. Для int это и"количество:" по.
$scope.issue.productId = productId;
function activate() {
$http.get('/product/list')
.then(function (response) {
$scope.products = response.data;
if (productId) {
console.log("" + $("#product option").length);//for clarity
$timeout(function () {
console.log("" + $("#product option").length);//for clarity
$('#product').val('number:'+productId);
}, 200);
}
});
}