AngularJS Select Boxen
Met AngularJS kunt u vervolgkeuzelijsten maken op basis van items in een array of een object.
Een selectievak maken met ng-options
Als u een vervolgkeuzelijst wilt maken op basis van een object of een array in AngularJS, moet u de ng-optionsrichtlijn gebruiken:
Voorbeeld
<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>
van-opties versus van-herhaling
U kunt de ng-repeatrichtlijn ook gebruiken om dezelfde vervolgkeuzelijst te maken:
Voorbeeld
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
Omdat de ng-repeatrichtlijn voor elk item in een array een blok HTML-code herhaalt, kan deze worden gebruikt om opties in een vervolgkeuzelijst te maken, maar de ng-optionsrichtlijn is speciaal gemaakt om een vervolgkeuzelijst met opties te vullen.
Wat gebruik ik?
U kunt zowel de ng-repeatrichtlijn als de ng-optionsrichtlijn gebruiken:
Stel dat je een array van objecten hebt:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
Voorbeeld
Gebruik ng-repeat:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
Gebruik bij gebruik van de waarde als object in ng-valueplaats van value:
Voorbeeld
Gebruik ng-repeatals object:
<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>
Voorbeeld
Gebruik 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>
Als de geselecteerde waarde een object is, kan het meer informatie bevatten en kan uw toepassing flexibeler zijn.
We zullen de ng-optionsrichtlijn in deze tutorial gebruiken.
De gegevensbron als object
In de vorige voorbeelden was de gegevensbron een array, maar we kunnen ook een object gebruiken.
Stel dat u een object hebt met sleutel-waardeparen:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
};
De uitdrukking in het ng-optionsattribuut is een beetje anders voor objecten:
Voorbeeld
Het gebruik van een object als gegevensbron xvertegenwoordigt de sleutel en
y
vertegenwoordigt de waarde:
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
De geselecteerde waarde is altijd de waarde in een sleutel- waardepaar .
De waarde in een sleutel- waardepaar kan ook een object zijn:
Voorbeeld
De geselecteerde waarde is nog steeds de waarde in een sleutel- waardepaar , maar deze keer is het een object:
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color :
"red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
De opties in de vervolgkeuzelijst hoeven niet de sleutel in een sleutel -waardepaar te zijn, het kan ook de waarde zijn, of een eigenschap van het waarde-object:
Voorbeeld
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>