Поля выбора AngularJS
AngularJS позволяет создавать раскрывающиеся списки на основе элементов массива или объекта.
Создание поля выбора с помощью ng-options
Если вы хотите создать выпадающий список на основе объекта или массива в AngularJS, вам следует использовать ng-optionsдирективу:
Пример
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName"
ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.names = ["Emil", "Tobias",
"Linus"];
});
</script>
вариантов и повторов
Вы также можете использовать ng-repeatдирективу для создания такого же выпадающего списка:
Пример
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
Поскольку ng-repeatдиректива повторяет блок HTML-кода для каждого элемента массива, ее можно использовать для создания параметров в раскрывающемся списке, но ng-optionsдиректива была создана специально для заполнения раскрывающегося списка параметрами.
Что я использую?
Вы можете использовать как ng-repeatдирективу, так и ng-optionsдирективу:
Предположим, у вас есть массив объектов:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
Пример
Использование ng-repeat:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
При использовании значения в качестве объекта используйте ng-valueinsead of value:
Пример
Использование ng-repeatв качестве объекта:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>You selected a {{selectedCar.color}} {{selectedCar.model}}</h1>
Пример
Использование ng-options:
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{selectedCar.color}}</p>
Когда выбранное значение является объектом, оно может содержать больше информации, и ваше приложение может быть более гибким.
Мы будем использовать ng-optionsдирективу в этом уроке.
Источник данных как объект
В предыдущих примерах источником данных был массив, но мы также можем использовать объект.
Предположим, у вас есть объект с парами ключ-значение:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
};
Выражение в ng-optionsатрибуте немного отличается для объектов:
Пример
Использование объекта в качестве источника данных xпредставляет ключ и
y
представляет значение:
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
Выбранное значение всегда будет значением в паре ключ- значение .
Значение в паре ключ - значение также может быть объектом:
Пример
Выбранное значение по-прежнему будет значением в паре ключ- значение , только на этот раз это объект:
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color :
"red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
Параметры в раскрывающемся списке не обязательно должны быть ключом в паре ключ -значение, это также может быть значение или свойство объекта значения:
Пример
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>