AngularJS Wybierz Skrzynki

Angularjs pozwala tworzyć rozwijane listy na podstawie pozycji w tablicy lub obiektu.

Tworzenie Zaznacz pole Korzystanie NG-opcje

Jeśli chcesz utworzyć listę rozwijaną, opartego na obiekcie lub tablicy w angularjs, należy użyć ng-option dyrektywy:

Przykład

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});

</script>

Spróbuj sam "

NG-opcje vs NG-repeat

Można również skorzystać z ng-repeat dyrektywy do tej samej listy rozwijanej:

Przykład

Spróbuj sam "

Ponieważ ng-repeat dyrektywa powtarza blok kodu HTML dla każdego elementu w tablicy, to może być wykorzystywane do tworzenia opcji na liście rozwijanej, ale ng-options dyrektywa została wykonana specjalnie dla napełniania listę rozwijaną z opcjami, i ma co najmniej jedna ważna zaleta:

Dropdowns wykonane z ng-options pozwala wybrana wartość być przedmiotem, a Dropdowns wykonane z ng-repeat musi być ciągiem.

Co mogę korzystać?

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

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

ng-repeat dyrektywa ma swoje ograniczenia, wybrana wartość musi być ciągiem:

Przykład

Korzystanie ng-repeat :

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

<h1>You selected: {{selectedCar}}</h1>

Spróbuj sam "

Podczas korzystania z ng-options dyrektywy, wybrana wartość może być przedmiotem:

Przykład

Korzystanie ng-options :

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>

<h1>You selected: {{selectedCar.model}}</h1>
<p>It's color is: {{selectedCar.color}}</p>

Spróbuj sam "

Gdy wybrana wartość może być przedmiotem, może pomieścić więcej informacji, a aplikacja może być bardziej elastyczny.

Użyjemy ng-options dyrektywę w tym tutorialu.

Źródłem danych jako przedmiot

W poprzednich przykładach źródłem danych był tablicą, ale możemy również użyć obiektu.

Załóżmy, że mamy obiekt z par klucz-wartość:

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

Wyrażenie w ng-options atrybutu jest nieco inna dla obiektów:

Przykład

Użyciu obiektu jako źródło danych, x oznacza klucza, a y oznacza wartość:

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

<h1>You selected: {{selectedCar}}</h1>

Spróbuj sam "

Wybrana wartość zawsze będzie wartością w parze klawiaturze wartości.

Wartość w parze klawiaturze wartość może być również przedmiotem:

Przykład

Wybrana wartość będzie nadal wartość w parze klawiaturze wartości, tylko 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 na liście rozwijanej nie mają być kluczem w kluczu -value pary, może to być również wartość lub właściwością obiektu wartości: