Question

我有一个测试数据库可以工作，当我使用console.log时，我可以看到对象，但是当我尝试在html中渲染时。它显示空的原因？

我的角度代码

var app = angular.module('startBet',['firebase']);
var ref = new Firebase("https://vsw.firebaseio.com");

app.controller("ibet", function($scope, $firebaseObject) {
   $scope.todos = [{act: 'complete', test: 'abc'},
        {act: 'not', test: 'bdb'}];

    $scope.bets = [];

    var ref2 = new Firebase("https://vsw.firebaseio.com/bets");
    ref2.once("value", function(snapshot) {
      snapshot.forEach(function(childSnapshot) {
        var key = childSnapshot.key();
        var childData = childSnapshot.val();
        $scope.bets.push(childData);
        $scope.todos.push(childData);
      });
    });

    console.log($scope.todos);
    console.log($scope.bets);

我的HTML

    <div class="bot-container" ng-app='startBet'>
        <div class="in-play" ng-controller='ibet'>
            <header><p>{{todos.length}}</p></header>
            <div class="bets-list">
                <div class="bet-title">
                    {{bets.length}}
                </div>

抱歉任何结束标记。没有人费心去复制别人我可以看到我的硬编码在html中呈现的长度为2，而在另一个中它是0的。

但是在console.log中我可以看到所有对象都没有显示，或者只是那两个硬编码。

我在这里缺少什么？

提前致谢。

Answer 1

您需要使用ng-repeat来迭代列表：

<ul>
    <li ng-repeat="td in todos">{{td.act}}</li>
</ul>

Answer 2

对Firebase的请求回调可能不会触发要运行的摘要周期，因此您的DOM不会更新。尝试将代码包装在$timeout中，这将触发摘要周期。（有关更详细的说明，请参阅this。）

app.controller("ibet", function($scope, $firebaseObject, $timeout) {

...

var ref2 = new Firebase("https://vsw.firebaseio.com/bets");
ref2.once("value", function(snapshot) {
    $timeout(function() {
        snapshot.forEach(function(childSnapshot) {
            var key = childSnapshot.key();
            var childData = childSnapshot.val();
            $scope.bets.push(childData);
            $scope.todos.push(childData);
        });
    });
});

您可能希望使用AngularFire代替常规的Firebase JavaScript API。

推入数组控制台日志可以看到但不会在html中渲染为什么？ angularJS

2 个答案: