在angularjs中显示来自firebase的数据答案

【问题标题】：Showing data from firebase in angularjs在angularjs中显示来自firebase的数据
【发布时间】：2016-09-07 09:53:47
【问题描述】：

我在从控制器显示我的数据以在 ionic angularjs 中查看时遇到问题这是我的代码

alkitab.html

 <ion-view view-title="Alkitab ">
    <ion-content class='has-header' style="padding:2%;" ng-init="loadbiblelist();">
        <ion-list>


            <div ng-repeat= "data in alkitabdate" style="margin:0 auto; text-align:center; ">
           <h4>{{data.tanggal}}</h4>
           <br>
            <h4>{{data.alkitabs.judulPasal}}</h4>
            <br>
            <div class="isialkitab" style="line-height:2em; font-size:18px; font-family:Roboto; text-align: justify; -moz-text-align-last: center; text-align-last: left;">
                {{data.alkitabs.isi}}
            </div>

            </div>
        </ion-list>
         <button class="button-balanced button-block large-button ion-thumbsup" ng-click="submit()"><h4>Saya Sudah Baca Alkitab</h4></button>
    </ion-content>
   </ion-view>

Controller.js

.controller('AlkitabCtrl', ['$scope', '$rootScope', '$timeout', '$state', '$stateParams', 'Alkitabdetail', function($scope, $rootScope, $timeout, $state, $stateParams, Alkitabdetail) {
    var rootRef = new Firebase('https://ayobacaalkitab.firebaseio.com/');
    var childAlkitab = rootRef.child('alkitab');
    var alkitabId = $stateParams.alkitabId;
    console.log(alkitabId);   
    var bibleidurl = childAlkitab.child(alkitabId);

    $scope.loadbiblelist = function() {

    bibleidurl.on('value', function(snapshot){
      $timeout(function(){

      var snapshotVal = snapshot.val();

      $scope.alkitabdate=snapshotVal;
      console.log($scope.alkitabdate);

      });
    });
  }


}])

问题出在 console.log($scope.alkitabdate) 我可以从 firebase 看到结果，但是当我使用 ionic serve 尝试时它没有显示。

任何帮助表示赞赏。谢谢。

【问题讨论】：

它是从 firebase 获得的数组吗？向我们展示结果
@Sajeetharan 我用结果更新它

标签： angularjs ionic-framework firebase firebase-realtime-database

【解决方案1】：

这里的问题是返回结果是一个对象而不是一个数组，所以你不能对一个对象使用 ng-repeat，你可以做的是，

<div style="margin:0 auto; text-align:center; ">
<h4>{{alkitabdate.tanggal}}</h4>
<br>
 <h4>{{alkitabdate.alkitabs.judulPasal}}</h4>
 <br>
 <div class="isialkitab" style="line-height:2em; font-size:18px; font-family:Roboto; text-align: justify; -moz-text-align-last: center; text-align-last: left;">
 {{alkitabdate.alkitabs.isi}}
 </div>

如果您的结果包含多个对象（即数组），则您拥有的代码应该可以工作。

【讨论】：