AngularJS dropdown-box

AngularJS laat je zien om een dropdown-list te maken op basis van items in een array of object.

Maak een dropdown-box met ng-options

Als je een dropdown-list wilt maken op basis van een object of array in AngularJS, moet je ng-options Instructie:

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>

Probeer het zelf

ng-options en ng-repeat

U kunt ook ng-repeat Gebruik de instructie om dezelfde dropdown-list te maken:

Voorbeeld

<select>
  <option ng-repeat="x in names">{{x}}</option>
</select>

Probeer het zelf

Omdat ng-repeat De instructie herhaalt een HTML-code voor elk item in de array, dus het kan gebruikt worden om opties in een dropdown-list te maken, maar ng-options De instructie is speciaal ontworpen om opties in een dropdown-list in te vullen.

Welke moet je gebruiken?

U kunt gebruiken ng-repeat en instructie ng-options Instructie:

Stel dat je een objectarray 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>Je hebt geselecteerd: {{selectedCar}}</h1>

Probeer het zelf

Wanneer je een waarde als object gebruikt, gebruik dan ng-value met value:

Voorbeeld

Vervang ng-repeat Gebruik als object:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>Je hebt een {{selectedCar.color}} {{selectedCar.model}} geselecteerd</h1>

Probeer het zelf

Voorbeeld

Gebruik ng-options:

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>Je hebt geselecteerd: {{selectedCar.model}}</h1>
<p>De kleur ervan is: {{selectedCar.color}}</p>

Probeer het zelf

Als de geselecteerde waarde een object is, kan het meer informatie bevatten en kan je applicatie flexibeler zijn.

We zullen in deze handleiding gebruiken ng-options Instructie.

Als dat bron van het object

In het vorige voorbeeld was de databron een array, maar we kunnen ook een object gebruiken.

Stel dat je een object hebt met sleutelwaardenparen:

$scope.cars = {
  car01 : "Ford",
  car02 : "Fiat",
  car03 : "Volvo"
};

ng-options De expressie van de eigenschappen van het object is iets anders:

Voorbeeld

Gebruik een object als dat bronx Vertegenwoordigt de sleutel,y Vertegenwoordigt de waarde:

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>Je hebt geselecteerd: {{selectedCar}}</h1>

Probeer het zelf

De geselecteerde waarde zal altijd nog steeds in het sleutelwaardepaar zijnWaarde.

in het sleutelwaardepaarWaardekan ook een object zijn:

Voorbeeld

De geselecteerde waarde zal altijd nog steeds in het sleutelwaardepaar zijnWaardeDit 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"}
};

Probeer het zelf

De opties in de keuzelijst hoeven niet overeen te komen met de sleutelwaardenpaarSleutelHet kan ook een waarde zijn, of een eigenschap van een waardeobject zijn:

Voorbeeld

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>

Probeer het zelf