AngularJS Select (флажок)

Опыт работы : AngularJS инструкция нг-значение

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

Создайте окно выбора с помощью опции NG-

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

примеров

вар приложение = angular.module ( 'MYAPP' , []);
app.controller ( 'myCtrl', функция ( $ сфера) {
$ Scope.names = [ "Google", "w3big", "Taobao"];
});

</ Script>

Попробуйте »

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

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

примеров

<Выбрать>
<Опция нг-повтор = "х в именах"> {{х}} </ опции>
</ Select>

Попробуйте »

нг-повтор инструкция в цикле через массив HTML код для создания раскрывающегося списка, но нг опции-командылучше всего подходит для создания выпадающего списка, он имеет следующие преимущества:

Объекта с помощьюопции нг-опций,нг-повторений является строкой.

Его следует использовать что лучше?

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

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

нг-повтор имеет свои ограничения, выбранное значение является строкой:

примеров

Использованиенг-повтора:

<Выберите нг-модель = "selectedSite ">
<Опция нг-повтор = "х в местах" значение = "{{x.url}}"> {{x.site}} </ опции>
</ Select>

<H1> Ваш выбор: {{selectedSite}} </ h1>

Попробуйте »

Используйте командуNG-опции, выберите значение объекта:

примеров

ИспользуйтеNG-опции:

<Выбор нг-модели = "selectedSite " нг-опции = "x.site для х в местах">
</ Select>

<H1> Ваш выбор: {{selectedSite.site}} </ h1>
<P> URL является: {{selectedSite.url}} </ p>

Попробуйте »

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

Объект исходных данных

Предыдущий пример, который мы используем массив в качестве источника данных, мы имеем следующие объекты данных в качестве источника данных.

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

нг-варианты , использующие объекты очень разные, следующим образом :

примеров

Использование объекта в качестве источника данных,х является ключом (ключ),Y представляет собой значение (значение):

<Выбор нг-модели = "selectedSite " нг-опции = "х для (х, у) в сайтах">
</ Select>

<H1> значение , которое вы выбираете: {{selectedSite}} </ h1>

Попробуйте »

Ваш выбор значения в пар значений клавиатур.

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

примеров

Выберите значение в Клавишная значении величины, которая является , что она является объектом:

$ Scope.cars = {
car01: {бренда: "Ford" , модель: "Мустанг", цвет: "красный"},
car02: {бренда: "Fiat" , модель: "500", цвет: "белый"},
car03: {бренда: "Вольво" , модель: "XC90", цвет: "черный"}
};

Попробуйте »

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