AngularJS vă permite să creați liste derulante bazate pe elemente într-o matrice sau un obiect.
Crearea unui caseta Selectați Utilizarea ng-opțiuni
Dacă doriți să creați o listă verticală, bazată pe un obiect sau o matrice în AngularJS, ar trebui să utilizați ng-option directivă:
Exemplu
<div ng-app="myApp" ng-controller="myCtrl">
<select 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 = ["Emil", "Tobias" ,
"Linus"];
});
</script>
Încearcă - l singur » ng-opțiuni vs ng-repetare
Puteți utiliza , de asemenea ng-repeat directiva pentru a face aceeași listă drop - down:
Deoarece ng-repeat directiva repeta un bloc de cod HTML pentru fiecare element dintr - o matrice, acesta poate fi folosit pentru a crea opțiuni dintr - o listă verticală, dar ng-options de directivă a fost făcută special pentru completarea unei liste drop - down cu opțiuni, și are cel puțin un avantaj important:
Dropdowns realizate cu ng-options permite valoarea selectată pentru a fi un obiect, în timp ce dropdowns realizate din ng-repeat trebuie să fie un șir.
Ce utilizez?
Să presupunem că aveți o serie de obiecte:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
]; ng-repeat directiva are limite Este, valoarea selectată trebuie să fie un șir de caractere:
Exemplu
Utilizarea ng-repeat :
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
Încearcă - l singur » Când se utilizează ng-options directivei, valoarea selectată poate fi un obiect:
Exemplu
Utilizarea 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>
Încearcă - l singur » Atunci când valoarea selectată poate fi un obiect, acesta poate deține mai multe informații, și aplicația dvs. poate fi mai flexibilă.
Vom utiliza ng-options de directivă în acest tutorial.
Sursa de date ca un obiect
În exemplele anterioare, sursa de date a fost o matrice, dar putem folosi, de asemenea, un obiect.
Să presupunem că aveți un obiect cu perechile cheie-valoare:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
}; Expresia în ng-options atribut este un pic diferit pentru obiecte:
Exemplu
Folosind un obiect ca sursă de date, x reprezintă cheia, și y reprezintă valoarea:
<select ng-model="selectedCar" ng-options=" x for (x, y) in cars ">
</select>
<h1>You selected: {{selectedCar}}</h1>
Încearcă - l singur » Valoarea selectată va fi întotdeauna valoarea într - o pereche valoare - cheie.
Valoarea într - o pereche de valoare poate fi , de asemenea - cheie un obiect:
Exemplu
Valoarea selectată va fi în continuare valoarea într - o pereche valoare - cheie, doar de data aceasta este un obiect:
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color :
"red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
Încearcă - l singur » Opțiunile din lista verticală nu are fi cheia într - o pereche de chei valoare Kq, acesta poate fi , de asemenea , valoarea, sau o proprietate a obiectului de valoare:
Exemplu
<select ng-model="selectedCar" ng-options=" y.brand for (x, y) in cars">
</select>
Încearcă - l singur »