Angularjs Firebase获取数据列表

问题描述:

我试图从Firebase获取数据。我的做法是更好地学习Firebase,我的应用就像一个消息应用。Angularjs Firebase获取数据列表

我的问题是,我试图获取这些消息数据,但因为他们有一个唯一的ID,我无法联系到他们。我怎样才能达到messagecontentsdates

这里是我的数据库结构:

angularish 
    -> <id> 
     -> "sender" : "john" 
     -> "to" : "sarah" 
     -> "date" : "16/09/2016" 
     -> "messageContent" : "Something like a long text..." 
    -> <id> 
     -> "sender" : "john" 
     -> "to" : "sarah" 
     -> "date" : "16/09/2016" 
     -> "messageContent" : "Something like a long text..." 
    -> <id> 
     -> "sender" : "john" 
     -> "to" : "sarah" 
     -> "date" : "16/09/2016" 
     -> "messageContent" : "Something like a long text..." 

这里是我的代码:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Test3 Angular</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/3.4.1/firebase.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase-app.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase-auth.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase-database.js"></script> 
    <!-- Leave out Storage --> 
    <!-- <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase-storage.js"></script> --> 
    <script> 
     // Initialize Firebase 
     firebase.initializeApp(config); 
    </script> 
    <script> 
     var app2 = angular.module("theapp",[]); 
     app2.controller("generalController",function($scope){ 

      var database = firebase.database(); 
      var rootRef = database.ref(); 
      var subRootRef = rootRef.child("angularish"); 
      $scope.messages = []; 

      rootRef.push({ 
       "sender":"y", 
       "to" : "x", 
       "messageContent" : "Something like a long text", 
       "date" : "10/06/2016" 
      }); 

      rootRef.on("value",function(snapshot){ 
      $scope.messages = snapshot.val(); 
      console.log(snapshot.val()); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div class="container" ng-app="theapp" ng-controller="generalController"> 
     {{ 1+1 }} 
     <ul> 
      <li ng-repeat="message in messages"> 
       {{ message.messageContent }} 
      </li> 
     </ul> 
    </div> 
</body> 
</html> 
+1

如果使用angularFire – charlietfl

+0

我试图使用它,但我又不能:(我怎么能做到这一点在angularfire –

+0

您可以使用'startAt'和'endAt' HTTPS非常非常简单://火力.google.com/docs/database/web/retrieve-data#filtering_data 继承人一个示例http://jsfiddle.net/katowulf/vQEmt/2/ –

你缺少一个$scope.$apply(),因为你做的角度之外的GET消化周期。

rootRef.on("value",function(snapshot){ 
    $scope.messages = snapshot.val(); 
    console.log(snapshot.val()); 
    $scope.$apply(); 
}); 
+0

是否需要转换'val()'的结果也可以使用ng-repeat? – cartant

+1

ng-repeat与对象一起工作,如果他们想要对其进行排序,那么他们将不得不将它转换为一个数组。 jsfiddle.net/kk8gyjt1/ –