Question

我有一个页面，老师可以选择一个班级（学生）。然后，教师可以通过拖动学生的头像来创建这个班级的学生群体。

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

Answer 1

你错过了$ rootScope。$ apply，因为你已经完成了一些角度以外的事情：

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

Answer 2

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

$rootScope.$apply或$timeout(angular.noop)如果您需要＆＃34;保存摘要＆＃34;

使用firebase动态更改img ng-repeat

2 个答案: