AngularJS – DropDownListe (select/option) – Part 1


Bis vor kurzem, habe ich knockout für das Modelbinding auf JavaScript Ebene verwendet um mein UI dynamisch zu aktualisieren. Dann habe ich mir ein paar Einführen zu AngularJS angeschaut und habe etwas damit rumgespielt. Und bisher kann ich nur sagen das ich begeistert davon bin. Wie für jedes Framework benötigt man auch hier ein wenig Zeit um sich im Framework zurecht zu finden, aber es lohnt sich.

Es gibt eine menge Einführungsbeispiele auf YouTube die man sich anschauen kann, denn die Standarddokumentation von AngularJS ist gewöhnungsbedürftig und bei weitem nicht so gut wie bei knockout.

Daher werde Ich ein paar kleinere Tutorials zu den Folgenden Themen in der nächsten Zeit verfassen:

Alle Beispiele sind mit Hilfe von Visual Studio 2013 und ASP.NET MVC umgesetzt und können bei CodePlex angeschaut bzw. heruntergeladen werden.

Als erstes werde ich mit der DropDownListe mit einer “Bitte wählen” Auswahl starten. Wichtig ist es das man die DropDownListe nicht mit MVC über einen HTML Helper erstellt, sondern wir holen uns die Daten z.B. über einen AJAX Request in unserem Controller ab und wir verwenden kein “ng-repeat” sondern “ng-options” zum füllen der DropDownListe.

<select class="form-control" ng-model="selectedIndex" ng-options="item as item.Text for item in Levels">
    <option value="" ng-hide="selectedIndex">Bitte wählen</option>
</select>

Wichtig ist hier, das “selectedIndex” im scope definiert ist. Denn im “selectedIndex” wird unsere aktuelle Auswahl “abgelegt” von AngularJS und in unserem Beispiel handelt es sich hier immer um ein komplettes “Level” Objekt, welches im “Levels” Array enthalten ist. Wobei das “Levels” Array ebenfalls auf unserem scope definiert sein muss.

Der Controller sieht z.B. folgendermaßen aus:

function DropDownlistCtrl($log, $scope, dropDownlistSrv) {
    var scope = $scope, log = $log;
    $scope.selectedIndex = "";

    $scope.ValueChanger = function () {
        //Im selectedIndex liegt unser Komplettes "Objekt", daher können wir hier auch auf Text und Value zugreifen.
        return "Text: " + scope.selectedIndex.Text + " Value: " + scope.selectedIndex.Value;
    };

    $scope.LoadListData = function () {
        dropDownlistSrv.loadLevelsData().then(function (data) {
            scope.Levels = data;
        });
    };

    $scope.ResetListData = function () {
        scope.selectedIndex = "";
    }
}

angular.module("app.dropDownlistCtrl", ["app.dropDownlistSrv"])
    .controller("dropDownlistCtrl", DropDownlistCtrl);

Damit aber auch das “Bitte wählen” angezeigt wird, ist es wichtig das der “value” von “option” auf einen leeren String gestellt wird und es ist zu empfehlen das Sie “ng-hide” verwenden, dann verschwindet “Bitte wählen” aus der Auswahl sobald Sie ein Item ausgewählt haben. Wenn Sie den “selectedIndex” später wieder zurücksetzten, dann wird auch “Bitte wählen” wieder angezeigt.

//.NET Controller Code zum Zurückgeben des "Levels" wird als JSON Result zurückgegeben
public JsonResult GetLevels()
{
    List<ListItem> items = new List<ListItem>();
    items.Add(new ListItem() { Text = "Home", Value = "5"});
    items.Add(new ListItem() { Text = "Live", Value = "6"});
    items.Add(new ListItem() { Text = "Dev", Value = "7"});
    items.Add(new ListItem() { Text = "Staging", Value = "8"});

    return Json(items, JsonRequestBehavior.AllowGet);
}

Ebenfalls wichtig zu wissen ist, das AngularJS in der DropDownListe in “value” den Index des Array Einträgt, welches angezeigt wird und NICHT den “richtigen value”, denn der aktuell ausgewählte Value steht in meinem Beispiel immer in “selectedIndex”. D.h. aber auch, man kann nicht einfach mit einem einfachen Submit Button die ausgewählten Daten an den Server senden, denn hier würde nur der ausgewählte Index ankommen. Hier sollte man dann auch mit AngularJS die entsprechenden Daten an den Server zurücksenden.

Durch den Wert der in “ng-options” steht, wird angezeigt was genau “passieren” soll:

“for item in Levels” –> Gibt an das wir das “Levels” Array auf unserem scope durchgehen und hier kann dann in jedem Schleifendurchlauf auf den aktuellen Wert mit “item” zugegriffen werden.

“item as item.Text” –> Das erste “item” gibt an welcher Wert im “ng-model” für eine aktuelle Auswahl abgelegt werden kann, in unserem Fall wird das komplette Objekt dort abgelegt. Es hätte aber auch “item.Text” dort stehen können, dann würden wir im “selectedIndex” nur den Text ablegen. Der zweite Wert “item.Text” gibt an das in der “option” der “Text” angezeigt werden soll.

Das komplette Beispiel findet Ihr dann bei CodePlex.

Advertisements

Ein Gedanke zu „AngularJS – DropDownListe (select/option) – Part 1

  1. Pingback: AngularJs – ASP.NET MVC Datetime JSON Serialize und Anzeigen mit Hilfe einer Date Direktive – Part 2 | SquadWuschel's Blog

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s