AngularJS Выберите Коробки

AngularJS позволяет создавать выпадающие списки на основе элементов в массиве или объекта.

Создание Select Box Использование NG-опций

Если вы хотите создать выпадающий список, основанный на объекте или массив в AngularJS, вы должны использовать ng-option директивы:

пример

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});

</script>

Попробуй сам "

нг-варианты против нг-повтора

Вы также можете использовать ng-repeat директиву , чтобы сделать тот же выпадающий список:

пример

Попробуй сам "

Поскольку ng-repeat директива повторяет блок HTML кода для каждого элемента в массиве, он может быть использован для создания вариантов в раскрывающемся списке, но ng-options директива была сделана специально для заполнения выпадающий список с вариантами, и имеет по крайней мере одно важное преимущество:

Dropdowns , сделанные с ng-options позволяет выбранное значение , чтобы быть объектом, в то время как выпадающие , сделанные из ng-repeat должен быть строкой.

Что я могу использовать?

Предположим, у вас есть массив объектов:

$scope.cars = [
    {model : "Ford Mustang", color : "red"},
    {model : "Fiat 500", color : "white"},
    {model : "Volvo XC90", color : "black"}
];

ng-repeat директива имеет это ограничения, выбранное значение должно быть строкой:

пример

Использование 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-options директивы, выбранное значение может быть объектом:

пример

Использование ng-options :

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>

<h1>You selected: {{selectedCar.model}}</h1>
<p>It's 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"}
};

Попробуй сам "

Параметры в раскрывающемся списке не имеет быть ключ в ключевой -Value пары, она также может быть значение, или свойство объекта значения: