Angularjs Select (pole wyboru)

Poprzedni: angularjs instrukcja ng wartości

Angularjs można utworzyć listę rozwijaną opcji używać tablicy lub obiektu.

Utwórz pole wyboru przy użyciu NG-opcje

W angularjs możemy użyć poleceniang opcję tworzenia listy rozwijanej elementów listy przez obiekty i tablice cyklu produkcji, następujące przykłady:

Przykłady

var app = angular.module ( "myApp" , []);
app.controller ( "myCtrl ', function ( $ zakres) {
$ Scope.names = [ "Google", "w3big", "Taobao"];
});

</ Script>

Spróbuj »

NG-opcje i ng-repeat

Możemy również użyć dyrektywyNG-repeat, aby utworzyć listę rozwijaną:

Przykłady

Spróbuj »

ng-repeat przeznaczony jest do pętli tablicy kodu HTML, aby utworzyć listę rozwijaną, ale NG-opcjepolecenia lepiej nadaje się do tworzenia listy rozwijanej, ma następujące zalety:

Obiekt przy użyciuNG-Opcje Opcje,ng-repeat jest ciągiem.

Należy stosować co jest lepsze?

Załóżmy, że korzystać z następujących przedmiotów:

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

ng-repeat ma swoje ograniczenia, wybrana wartość jest ciągiem znaków:

Przykłady

Korzystanieng-repeat:

<Wybierz ng model = "selectedSite ">
<Opcja ng-repeat = "x na stronach" value = "{{x.url}}"> {{x.site}} </ option>
</ Select>

<H1> Twój wybór to: {{selectedSite}} </ h1>

Spróbuj »

KomendaNG-Użyj opcji wybierz wartość obiektu:

Przykłady

UżyjNG-opcje:

<Wybierz ng-Model = "selectedSite " NG-options = "x.site for x in stron">
</ Select>

<H1> Twój wybór to: {{selectedSite.site}} </ h1>
<P> URL: {{selectedSite.url}} </ p>

Spróbuj »

Po wybraniu wartość jest obiektem, możemy uzyskać więcej informacji i zastosowania bardziej elastyczne.

obiektu źródła danych

Poprzedni przykład używamy tablicę jako źródła danych, mamy następujące obiekty danych jako źródło danych.

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

NG-opcje wykorzystujące obiekty są bardzo różne, w następujący sposób:

Przykłady

Korzystanie z obiektu jako źródło danych,x jest klucz (key),y jest wartością (wartość):

<Wybierz ng-Model = "selectedSite " NG-options = "x dla (x, y) w zakładach">
</ Select>

<H1> Wartość wybrać: {{selectedSite}} </ h1>

Spróbuj »

Twój wybór jest wartość w par wartości klawiaturze.

wartość par wartości klawiaturze może być również cel:

Przykłady

Wybierz wartość w klawiaturze wartości wartości, co jest, że jest to przedmiot:

$ Scope.cars = {
car01: {marka: "Ford" , model: "Mustang", kolor: "czerwony"},
car02: {marka: "Fiat" , model "500", kolor: "białe"},
car03: {marka: "Volvo" , model: "XC90", kolor: "czarny"}
};

Spróbuj »

Nie mogą być stosowane kluczowych -value pary klucz, za pomocą właściwości obiektu bezpośrednio z menu rozwijanego: