Pola wyboru AngularJS
AngularJS pozwala tworzyć listy rozwijane na podstawie elementów tablicy lub obiektu.
Tworzenie pola wyboru za pomocą ng-options
Jeśli chcesz utworzyć listę rozwijaną opartą na obiekcie lub tablicy w AngularJS, powinieneś użyć ng-optionsdyrektywy:
Przykład
<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>
of-options vs of-repeat
Możesz również użyć ng-repeatdyrektywy, aby utworzyć tę samą listę rozwijaną:
Przykład
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
Ponieważ ng-repeatdyrektywa powtarza blok kodu HTML dla każdego elementu w tablicy, może być używana do tworzenia opcji na liście rozwijanej, ale ng-optionsdyrektywa została stworzona specjalnie do wypełniania listy rozwijanej opcjami.
Czego używam?
Możesz użyć zarówno ng-repeatdyrektywy, jak i ng-optionsdyrektywy:
Załóżmy, że masz tablicę obiektów:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
Przykład
Za pomocą ng-repeat:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
Używając wartości jako obiektu, użyj ng-valueinsead of value:
Przykład
Używanie ng-repeatjako obiektu:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>You selected a {{selectedCar.color}} {{selectedCar.model}}</h1>
Przykład
Za pomocą ng-options:
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{selectedCar.color}}</p>
Gdy wybrana wartość jest obiektem, może zawierać więcej informacji, a aplikacja może być bardziej elastyczna.
W tym samouczku użyjemy ng-optionsdyrektywy.
Źródło danych jako obiekt
W poprzednich przykładach źródłem danych była tablica, ale możemy również użyć obiektu.
Załóżmy, że masz obiekt z parami klucz-wartość:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
};
Wyrażenie w ng-optionsatrybucie jest nieco inne dla obiektów:
Przykład
Użycie obiektu jako źródła danych xreprezentuje klucz i
y
reprezentuje wartość:
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
Wybrana wartość będzie zawsze wartością w parze klucz- wartość .
Wartością w parze klucz-wartość może być również obiekt:
Przykład
Wybrana wartość nadal będzie wartością w parze klucz- wartość , tylko tym razem jest to obiekt:
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color :
"red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
Opcje na liście rozwijanej nie muszą być kluczem w parze klucz - wartość, może to być również wartość lub właściwość obiektu wartości:
Przykład
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>