从 Firebase 中提取数据并在页面上显示答案

【问题标题】：pulling data from firebase and displaying on page从 Firebase 中提取数据并在页面上显示
【发布时间】：2014-12-04 01:15:17
【问题描述】：

我已经检查了有关 angularfire 的文档以检索和显示数据，但我遇到了问题！我想我正在返回数据，但只是不显示它。这是我的 plnker 的链接：http://plnkr.co/edit/LZ24sRoSJjuCHQnEGzQz?p=preview

索引

      <h1 ng-repeat="group in data.groups">{{group.name}}</h1>

      $scope.newGroup = {
        name: '',
        status: ''
      };

      $scope.addGroup = function(newGroup) {

        groupsService.addGroup(newGroup);

        $scope.newGroup = {
            name: '',
            status: ''
        };

      };

    .factory('groupsService', ['$firebase', 'FIREBASE_URI',
      function ($firebase, FIREBASE_URI) {
        var ref = new Firebase(FIREBASE_URI);

        var groups = $firebase(ref).$asArray();

        var getGroups = function(){
          return groups;
        };

        var addGroup = function (newGroup) {
          console.log(newGroup)
          groups.$add(newGroup);
        };

        return {
          getGroups: getGroups,
          addGroup: addGroup,

        }

【问题讨论】：

缺少显示组的部分。你的 $scope.data.groups 是空的吗？

标签： angularjs firebase angularfire

【解决方案1】：

plunkr 中的视图不包含 ng-repeat 标记。但如果我添加这些片段，它会按预期工作。

在控制器中你需要将数组添加到作用域中：

$scope.data = {};
$scope.data.groups = groupsService.getGroups();

然后在视图中，循环遍历绑定控制器的元素内的组：

<form ng-controller="MainCtrl">
  <h1 ng-repeat="group in data.groups">{{group.name}}</h1>
</form>

输出

嗨

嗨

dfgdfg

更新 plunkr：http://plnkr.co/edit/HWZj5szozMMBXGadu2U6?p=preview

【讨论】：