推入數組控制檯日誌可以看到，但不會呈現在HTML爲什麼？ angularJS

我有一個測試數據庫工作，當我使用console.log我可以看到的對象，但當我嘗試呈現在HTML中。它顯示空爲什麼？推入數組控制檯日誌可以看到，但不會呈現在HTML爲什麼？ angularJS

我的角碼

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>

對不起任何結束標記。沒有打擾複製其他人我可以看到我的硬編碼的長度爲2，其格式爲html，而另一個爲0.

但是在console.log中，我可以看到兩個都顯示所有對象，或者只是那兩個硬編碼。

我在這裏錯過了什麼？

在此先感謝。

來源

2016-09-24 Dora

您需要使用ng-repeat遍歷列表：

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

來源

2016-09-24 23:47:26

請求火力地堡很可能無法觸發消化週期的回調運行，所以你的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而不是常規火力地堡的JavaScript API的。

來源

2016-09-25 00:01:18 xli

推入數組控制檯日誌可以看到，但不會呈現在HTML爲什麼？ angularJS

回答

相關問題