AngularJS-rullgardinsmeny

AngularJS tillåter dig att skapa rullgardinsmenyer baserat på objekt eller element i en array.

Skapa en rullgardinsmeny med ng-options

Om du vill skapa en rullgardinsmeny baserat på ett objekt eller en array i AngularJS, bör du använda ng-options Instruktion:

Exempel

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

Prova själv

ng-options med ng-repeat

Du kan också använda ng-repeat Använd instruktionen för att skapa samma rullgardinsmeny:

Exempel

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

Prova själv

På grund av ng-repeat Instruktionen repeterar en HTML-kod för varje objekt i en array, så den kan användas för att skapa alternativ i rullgardinsmenyer, men ng-options Instruktionen är designad specifikt för att fylla ut alternativ i rullgardinsmenyer.

Vilken ska användas?

Du kan använda ng-repeat Instruktion och ng-options Instruktion:

Anta att du har ett objektarray:

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

Exempel

Använd ng-repeat：

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

Prova själv

När du använder värde som objekt, använd ng-value med value：

Exempel

ersätt ng-repeat Används som objekt:

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

Prova själv

Exempel

Använd ng-options：

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>Du valde: {{selectedCar.model}}</h1>
<p> dess färg är: {{selectedCar.color}}</p>

Prova själv

När det valda värdet är ett objekt, kan det innehålla mer information och ditt program kan bli mer flexibelt.

Vi kommer att använda ng-options instruktioner.

som datakälla för objekt

I föregående exempel var datakällan en array, men vi kan också använda objekt.

Anta att du har ett objekt med nyckel-värde-pa

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

ng-options uttrycket i egenskaperna är något annorlunda för objekt:

Exempel

Använd objekt som datakälla,x representerar nyckeln,y representerar värdet:

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

Prova själv

Valda värdet kommer alltid att vara i nyckel-värde-paretVärde.

i nyckel-värde-paretVärdekan också vara ett objekt:

Exempel

Valda värdet kommer fortfarande att vara i nyckel-värde-paretVärde，men denna gång är det ett objekt:

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

Prova själv

Alternativen i rullgardinslistan behöver inte vara i nyckel-värde-paretNyckel，det kan också vara ett värde, eller en egenskap på ett värdeobjekt:

Exempel

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

Prova själv