Rozwijane listy w AngularJS

AngularJS pozwala na tworzenie rozwijanych list na podstawie elementów tablicy lub obiektu.

Tworzenie rozwijanego listy za pomocą ng-options

Jeśli chcesz stworzyć rozwijany listę na podstawie obiektu lub tablicy w AngularJS, powinieneś użyć ng-options Instrukcja:

Przykład

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

Spróbuj sam

ng-options z ng-repeat

Możesz również użyć ng-repeat Polecenie do tworzenia identycznego rozwijanego listy:

Przykład

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

Spróbuj sam

Dzięki ng-repeat Instrukcja powtarza fragment HTML dla każdego elementu tablicy, więc można jej użyć do tworzenia opcji w rozwijanych listach, ale ng-options Instrukcja jest specjalnie zaprojektowana do wypełniania opcji w rozwijanych listach.

Która z nich powinna być użyta?

Możesz użyć ng-repeat Instrukcja i ng-options Instrukcja:

Załóżmy, że masz tablicę obiektów:

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

Przykład

Używając ng-repeat:

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

Spróbuj sam

Kiedy używasz wartości jako obiektu, używaj ng-value zastępuje value:

Przykład

zastępuje ng-repeat jako obiekt:

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

Spróbuj sam

Przykład

Używając ng-options:

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>Wybrałeś: {{selectedCar.model}}</h1>
<p>Jego kolor to: {{selectedCar.color}}</p>

Spróbuj sam

Kiedy wybrana wartość jest obiektem, może zawierać więcej informacji, a Twoja aplikacja może być bardziej elastyczna.

Użyjemy jej w tym tutorialu: ng-options instrukcja.

jako źródło danych obiektu

W poprzednim przykładzie źródłem danych była tablica, ale możemy również użyć obiektu.

Załóżmy, że masz obiekt z parapecie klucz-wartość:

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

ng-options wyrażenia atrybutów dla obiektów są nieco różne:

Przykład

Używając obiektu jako źródła danych:x representuje klucz:y representuje wartość:

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

Spróbuj sam

Wybrana wartość zawsze będzie kluczem w parapecie wartości:Wartość.

klucz w parapecie wartości:Wartośćmoże być również obiektem:

Przykład

Wybrana wartość nadal będzie kluczem w parapecie wartości:WartośćTym razem jest to obiekt:

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

Spróbuj sam

Opcje listy rozwijanej nie muszą być kluczami wartościKluczMoże to być również wartość lub właściwość obiektu wartości:

Przykład

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

Spróbuj sam