Dynamisch ändern Bildwiederholung mit Firebase

Question

Ich habe eine Seite, auf der ein Lehrer eine Klasse (von Schülern) auswählen kann. Dann kann der Lehrer Gruppen von Schülern aus dieser Klasse erstellen, indem er Avatare der Schüler zieht.

Ich habe eine Dropdown-Liste von Klassen und eine div mit Avataren der Schüler gefüllt.

Der HTML:

<select name="chosenClass" onchange="chooseClass(this.value)"> 
    <option ng-repeat="(key, value) in techerClasses">{{key}}</option> 
</select> 
... 
<div id="div0" ondrop="drop(event)" ondragover="allowDrop(event)" class="groupDiv"> 
    <img ng-repeat="(key, value) in classStudents" id={{key}} src="http://placehold.it/30x30/{{value}}" draggable="true" ondragstart="drag(event)"> 
</div> 

Der Controller-Code:

chooseClass = function (classInfo) { 
    if (classInfo > 0){ 
     $rootScope.classesRef.child(classInfo).on('value', function (dataSnapshot){ 
      $rootScope.classStudents = dataSnapshot.val().members; 
     }); 
    } 
} 

1. Wenn ich Daten manuell hinzufügen zu der $rootScope.classStudents vor der Seite lädt die Avatare richtig dargestellt wird.

2. console.log($rootScope.classStudents) nach $rootScope.classStudents = dataSnapshot.val().members; bestätigt , dass die richtigen Daten besteht.

3. Aber die Avatare werden nicht angezeigt.

4. Wenn ich im Browser auf "Zurück" und dann auf "Weiter" klicke, werden die Avatare angezeigt. Dies führt mich zu der Annahme, dass ich etwas brauche, die <img ng-repeat... zu aktualisieren?

Answer 1

Sie verpassen ein $ rootScope $ anwenden, wie Sie etwas außerhalb der Winkel getan haben.

chooseClass = function (classInfo) { 
    if (classInfo > 0){ 
     $rootScope.classesRef.child(classInfo).on('value', function (dataSnapshot){ 
      $rootScope.classStudents = dataSnapshot.val().members; 
      $rootScope.$apply(); 
     }); 
    } 
} 

Alternativ in $firebaseArray suchen mit:

chooseClass = function (classInfo) { 
    if (classInfo > 0){ 
     $rootScope.classStudents = $firebaseArray($rootScope.classesRef.child(classInfo).child('members')) 
    } 
} 

Answer 2

src="http://placehold.it/30x30/{{value}}" auf ng-src="http://placehold.it/30x30/{{value}}", um das Attribut src dem Digest hinzuzufügen.

Auch $rootScope.$apply oder $timeout(angular.noop) wenn Sie benötigen ein