Kursusanbefalinger:

AngularJS dropdown-vindue

AngularJS giver dig mulighed for at oprette dropdown-lister baseret på elementer i en array eller et objekt.

Opret dropdown-vindue med ng-options ng-options Instruktion:

Eksempel

Hvis du vil oprette en dropdown-liste baseret på et objekt eller en array i AngularJS, skal du bruge
<div ng-app="myApp" ng-controller="myCtrl">
</select>
<select ng-model="selectedName" ng-options="x for x in names">
</div>
<script>
var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
);

Prøv det selv

</script>

ng-options sammen med ng-repeat ng-repeat Du kan også bruge

Eksempel

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

Prøv det selv

Pga. ng-repeat Instruktionen gentager et stykke HTML-kode for hver element i en array, så den kan bruges til at oprette valgmuligheder i dropdown-lister, men ng-options Instruktionen er designet specifikt til at fylde valgmuligheder i dropdown-lister.

Hvilken skal du bruge?

Du kan bruge ng-repeat Instruktion og ng-options Instruktion:

antag, at du har en objektarray:

$scope.cars = [
  {model : "Ford Mustang", color : "red"},
  {model : "Fiat 500", color : "white"},
  {model : "Volvo XC90", color : "black"}
];

Eksempel

brug ng-repeat：

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>Du valgte: {{selectedCar}}</h1>

Prøv det selv

når værdien bruges som objekt, brug ng-value med value：

Eksempel

erstat ng-repeat brugt som objekt:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>Du valgte en {{selectedCar.color}} {{selectedCar.model}}</h1>

Prøv det selv

Eksempel

brug ng-options：

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>Du valgte: {{selectedCar.model}}</h1>
<p>Dens farve er: {{selectedCar.color}}</p>

Prøv det selv

når det valgte værdi er et objekt, kan det indeholde mere information, og din applikation kan være mere fleksibel.

vi vil bruge i denne vejledning ng-options kommando.

som datakilde for objektet

I det tidligere eksempel var datakilden en array, men vi kan også bruge et objekt.

antag, at du har et objekt med nøgle-værdipar:

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

ng-options udtrykket i egenskaberne er lidt forskelligt for objekter:

Eksempel

brug objekt som datakilde,x repræsenterer nøgle,y repræsenterer værdi:

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

Prøv det selv

Valget vil altid være i nøgle-værdiparetværdi.

i nøgle-værdiparetværdikan også være et objekt:

Eksempel

Valget vil fortsat være i nøgle-værdiparretværdi，men denne gang er det et objekt:

$scope.cars = {
  car01 : {brand : "Ford", model : "Mustang", color : "red"},
  car02 : {brand : "Fiat", model : "500", color : "white"},
  car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

Prøv det selv

Valg i en rullemenu behøver ikke at være en nøgle-værdi parNøgle，det kan også være en værdi eller en egenskab af en værdiobjekt:

Eksempel

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

Prøv det selv