使用 firebase 动态更改 img ng-repeat答案

【问题标题】：Dynamically change img ng-repeat using firebase使用 firebase 动态更改 img ng-repeat
【发布时间】：2017-01-28 04:21:54
【问题描述】：

我有一个页面，老师可以在其中选择一个班级（学校学生）。然后老师可以通过拖动学生的头像从这个班级创建学生组。

我有一个班级下拉列表和一个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... 刷新？

【问题讨论】：

在 img 选项卡中使用 `ng-src' 而不是 src

标签： javascript angularjs firebase angularjs-ng-repeat firebase-realtime-database

【解决方案1】：

你错过了 $rootScope.$apply ，因为你在 Angular 之外做了一些事情：

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'))
    }
}

【讨论】：

【解决方案2】：

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

如果您需要“保存摘要”，还可以使用 $rootScope.$apply 或 $timeout(angular.noop)

【讨论】：