使用Firebase动态更改img ng-repeat

我有一个页面，教师可以选择一个班级（学校学生）。然后老师可以通过拖动学生的化身来创建这个班的学生组。使用Firebase动态更改img ng-repeat

我有一个下拉列表的类和div充满了学生的化身。

的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>

控制器代码：

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

如果我的数据手动添加到$rootScope.classStudents 之前的页面加载头像会显示正确。
console.log($rootScope.classStudents)后 $rootScope.classStudents = dataSnapshot.val().members;证实，正确的数据就在那里。
但是没有显示头像。
如果我在浏览器中点击“返回”，然后“转发” - 化身将显示。这导致我认为我需要的东西，将告诉<img ng-repeat...刷新？

来源

2016-09-20 Yogev Levy

使用'NG-SRC”，而不是SRC – nmanikiran

你错过了$ rootScope $应用为你做的角之外的东西：

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

或者考虑使用$firebaseArray：

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

来源

2016-09-20 10:02:24

设置src="http://placehold.it/30x30/{{value}}"到ng-src="http://placehold.it/30x30/{{value}}"将src属性添加到摘要中。

而且$rootScope.$apply或$timeout(angular.noop)如果你需要一个在IMG标签 “保存消化”

来源

2016-09-20 10:44:45 McDit

使用Firebase动态更改img ng-repeat

回答

相关问题