Seite 4: Listings

Inhaltsverzeichnis

Listing 1: ViewModel für die gesamte Anwendung

function FlugBuchenVM(scope, http, q) {
    var that = this;

    this.fluege = new Array();

    this.scope = scope;
    this.q = q;
    this.http = http;

    this.selectedFlug = null;
    this.message = "";

    this.flugNummerFilter = "";
    this.flugVonFilter = "";
    this.flugNachFilter = "";

    this.loadFluege = function () {
        
        that.fluege.push(new FlugVM({ 
                                Id: 1, 
                                Abflugort: "Graz", 
                                Zielort: "Essen", 
                                Datum: new Date().toISOString() }));

        that.fluege.push(new FlugVM({ 
                                Id: 2, 
                                Abflugort: "Essen", 
                                Zielort: "Graz", 
                                Datum: new Date().toISOString() }));
    }

    this.selectFlug = function (idx) {
        var f = this.fluege[idx];
        this.selectedFlug = f;
    };

}

Listing 2: Einfache View

<div>

    <div class="step-header">
        <h2>Flug auswählen</h2>
    </div>

    <div ng-show="vm.message" class="message">
        {{ vm.message }}
    </div>

    <div>Flugnummer</div>
    <div><input ng-model="vm.flugNummerFilter" /></div>

    <div>Von</div>
    <div><input ng-model="vm.flugVonFilter" /></div>

    <div>Nach</div>
    <div><input ng-model="vm.flugNachFilter" /></div>

    <div><input type="button" value="Suchen" ng-click="vm.loadFluege()" />
    </div>

    <div>

        <table ng-show="vm.fluege.length &gt; 0">
            <tr>
                <th>Id</th>
                <th>Abflugort</th>
                <th>Zielort</th>
                <th>Freie Plätze</th>
            </tr>
            <tr ng-repeat="f in vm.fluege track by $index" 
                ng-class="{ selected: f.Id == vm.selectedFlug.Id }">

                <td>{{f.Id}}</td>
                <td>{{f.Datum}}</td>
                <td>{{f.Abflugort}}</td>
                <td>{{f.Zielort}}</td>
                <td><a href="javascript:void(0)" 
                       ng-click="vm.selectFlug($index)">Auswählen</a></td>
            </tr>
        </table>


    </div>

</div>


(jul)