Single Page Applications mit AngularJS, Teil 1: Erste Schritte

Listings

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>