Latest web development tutorials

AngularJS Select (casella di controllo)

AngularJS possibile creare un elenco a discesa di opzioni per utilizzare un array o un oggetto.

Creare una casella di selezione utilizzando NG-options

In AngularJS possiamo usare il comandong-opzione per creare un elenchi a discesa, voci di elenco attraverso gli oggetti e gli array di ciclo dell'uscita, esempi seguenti:

Esempi

<Div ng-app = "myApp " ng-controllore = "myCtrl">

<Selez one-modello = "selectedName " NG-options = "x per x nei nomi">
</ Select>

</ Div>

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

Prova »

NG-opzioni e ng-repeat

Possiamo anche usare direttivang-repeat per creare un elenco a discesa:

Esempi

<Seleziona>
<Opzione ng-repeat = "x nei nomi"> {{x}} </ option>
</ Select>

Prova »

istruzioning-repeat è quello di scorrere l'array di codice HTML per creare menu a discesa, ma NG-opzioni dicomando più adatto per la creazione di menu a discesa, ha i seguenti vantaggi:

Un oggetto utilizzando leopzioni di NG-opzioni,ng-repeat è una stringa.

Dovrebbe essere usato che è meglio?

Supponiamo di utilizzare i seguenti oggetti: 

$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 ha i suoi limiti, il valore scelto è una stringa:

Esempi

Utilizzareng-repeat:

<Selez one-model = "selectedSite ">
<Opzione ng-repeat = "x valore siti" = "{{}} x.url"> {{x.site}} </ option>
</ Select>

<H1> La tua scelta è: {{selectedSite}} </ h1>

Prova »

Utilizzare il comandoNG-opzioni, selezionare il valore di un oggetto:

Esempi

UtilizzareNG-opzioni:

<Selez one-modello = "selectedSite " NG-options = "x.site for x in siti">
</ Select>

<H1> La tua scelta è: {{selectedSite.site}} </ h1>
<P> URL è: {{selectedSite.url}} </ p>

Prova »

Quando si seleziona il valore è un oggetto, possiamo ottenere maggiori informazioni e le applicazioni più flessibile.

oggetto di origine dei dati

Nell'esempio precedente abbiamo utilizzare un array come una fonte di dati, abbiamo i seguenti oggetti di dati come origine dati. 

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

NG-opzioni utilizzando oggetti sono molto diversi, come segue:

Esempi

Utilizzando l'oggetto come fonte di dati,x è la chiave (chiave),y è un valore (valore):

<Selez one-modello = "selectedSite " NG-options = "x per (x, y) in siti">
</ Select>

<H1> valore si sceglie: {{selectedSite}} </ h1>

Prova »

La vostra scelta è il valore in coppie di valori tastiera.

valore le coppie di valori tastiere può anche essere un obiettivo:

Esempi

Selezionare il valore del valore tastiera del valore, che è che è un oggetto:

$ Scope.cars = {
car01: {marca: "Ford" , modello: "Mustang", colore: "rosso"},
car02: {marca: "Fiat" , modello "500", colore: "bianco"},
car03: {marca: "Volvo" , il modello: "XC90", colore: "nero"}
};

Prova »

Non può essere usato chiave chiave coppie -value, utilizzare le proprietà di un oggetto direttamente nel menu a discesa:

Esempi

<Selez one-modello = "selectedCar " NG-options = "y.brand per (x, y) in auto">
</ Select>

Prova »