Deklarativ Variablen in HTML mit Angular zuweisen

Ein Angular Controller enthält eine Liste, die per Ajax Call aus einem Json REST Service gefüllt werden. Dies ist eine Eigenschaft des Scope.

   1:  App.controller('chatController', function ($scope, $http) {
   2:      $scope.chatUsers = [];

In diesem Array sollen bestimmte Werte vorbelegt werden. Als Anwendungsfall kann man eine Dropdownliste nennen. In dieser sollen drei Länder vorbelegt werden, wie z.B. DE, AT und CH. Der Rest soll aus der Datenbank bzw. aus einem Service zusätzlich angezeigt werden. Wie kann man also Werte vorbelegen? Natürlich geht das im JavaScript Code des Controllers. Auch ein Modul lässt sich dafür einsetzen. Wenn man allerdings mit ng-init arbeitet, kann man mit einem deklarativen Ansatz dem UI Designer die Entscheidung überlassen. Das Array wird im HTML Code befüllt.

   1:   <div ng-controller="chatController">
   2:          <div ng-init="chatUsers = [ {name:'Franz',  userId:700000},
   3:                                   {name:'Laura',  userId:1300000}
   4:      ]"></div>

Diesen Ansatz könnte man durchaus auch für Offline-Daten nehmen, um etwas anzuzeigen, solange der Service nicht bereit ist.

Kommentare sind geschlossen