AngularJS Select

В AngularJS можно использовать массивы или объекты для создания опций выпадающего списка.

Используйте ng-options для создания выпадающего списка

В AngularJS мы можем использоватьng-optionЭта директива используется для создания выпадающего списка, а элементы списка генерируются путём перебора объектов и массивов, как в следующем примере:

Пример

<div ng-app="myApp" ng-controller="myCtrl"> <select ng-init="selectedName = names[0]" 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 = ["Google", "Example", "Taobao"]; }); </script>

Попробуйте сами »

ng-init для установки значения, выбранного по умолчанию.

ng-options и ng-repeat

Мы также можем использоватьng-repeatдирективу для создания раскрывающегося списка:

Пример

<select>
<option ng-repeat="x in names">{{x}}</option>
</select>

Попробуйте сами »

ng-repeatДиректива перебирает массивы с помощью HTML-кода для создания раскрывающихся списков, ноng-optionsдиректива лучше подходит для создания раскрывающихся списков, и у неё есть следующие преимущества:

Использованиеng-optionsопция является объектом,ng-repeatявляется строкой.

Какой из них лучше использовать?

Предположим, мы используем следующий объект:

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "Example", url : "http://www.example.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

ng-repeatЕсть ограничения, выбранное значение — строка:

Пример

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

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>

<h1>Вы выбрали:{{selectedSite}}</h1>

Попробуйте сами »

Использованиеng-optionsдирективы, выбранное значение — объект:

Пример

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

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

<h1>Вы выбрали:{{selectedSite.site}}</h1>
<p>URL-адрес:{{selectedSite.url}}</p>

Попробуйте сами »

Когда выбранное значение является объектом, мы можем получить больше информации, а приложение становится более гибким.

Источник данных — объект

В предыдущих примерах мы использовали массив в качестве источника данных; ниже мы будем использовать объект данных в качестве источника данных.

$scope.sites = {
    site01 : "Google",
    site02 : "Example",
    site03 : "Taobao"
};

ng-optionsИспользование объектов имеет большое значение, как показано ниже:

Пример

Использование объекта в качестве источника данных,xв качестве ключа,yв качестве значения:

<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>

<h1>Выбранное вами значение:{{selectedSite}}</h1>

Попробуйте сами »

Выбранное вами значение находится в паре ключ-значение, а именно взначении。

значениев паре ключ-значение, оно также может быть объектом:

Пример

Выбранное значение находится в паре ключ-значение, а именно взначениипары, в этом случае это объект:

$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

Попробуйте сами »

В выпадающем меню вы также можете не использоватьkeyв пареkey-value, а напрямую использовать свойства объекта:

Пример

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>

Попробуйте сами »
Другие расширения