AngularJS pudotusvalikko

AngularJS mahdollistaa pudotusvalikkojen luomisen taulukon tai objektin kohteiden perusteella.

Luo pudotusvalikko ng-optionsilla

Jos haluat luoda pudotusvalikon objektin tai taulukon perusteella AngularJS:ssä, tulisi käyttää ng-options Ohje:

Esimerkki

<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>

Kokeile itse

ng-options ja ng-repeat

Voit myös käyttää ng-repeat Tämä ohje lukee saman pudotusvalikon:

Esimerkki

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

Kokeile itse

Siksi ng-repeat Ohje toistaa HTML-koodin jokaiselle taulukon kohteelle, joten sitä voidaan käyttää vaihtoehtojen luomiseen pudotusvalikossa, mutta ng-options Ohje on suunniteltu erityisesti pudotusvalikon vaihtoehtojen täyttämiseksi.

Kumpaa ohjetta tulisi käyttää?

Voit käyttää ng-repeat Ohje ja ng-options Ohje:

Oletetaan, että sinulla on objektien taulukko:

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

Esimerkki

Käytä ng-repeat:

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

Kokeile itse

Kun käytät arvoa objektina, käytä ng-value korvaa value:

Esimerkki

Vaihda ng-repeat Käytetään objektina:

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

Kokeile itse

Esimerkki

Käytä ng-options:

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>Valitsit: {{selectedCar.model}}</h1>
<p>Väri on: {{selectedCar.color}}</p>

Kokeile itse

Kun valittu arvo on objekti, se voi sisältää enemmän tietoa, ja sovelluksesi voi olla joustavampi.

Käytämme tässä oppaassa ng-options ohje

Objektina tietolähteenä

Edellisessä esimerkissä tietolähde oli taulukko, mutta voimme käyttää myös objektia.

Oletetaan, että sinulla on objekti, jossa on avain-arvo-para

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

ng-options Ilmaisu objekteissa on hieman erilainen:

Esimerkki

Käytämme objektia tietolähteenäx edustaa avainta:y Edustaa arvoa:

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

Kokeile itse

Valitun arvon tulee aina olla avain-arvo-paraissaArvo.

avain-arvo-paraissaArvoSe voi myös olla objekti:

Esimerkki

Valitun arvon tulee edelleen olla avain-arvo-parissaArvo，tämä kertaa se on objekti:

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

Kokeile itse

Laskettelulistan valinnat eivät välttämättä ole avain-arvo-parejaAvain，se voi olla myös arvo tai arvo-objektin ominaisuus:

Esimerkki

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

Kokeile itse