在angularjs中显示来自firebase的数据

Question

我在从控制器显示离子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的结果，但是当我尝试使用离子服务时它没有显示。

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

Answer 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>

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