Question

我有一个AngularJS应用程序可以创建列表并将它们保存到Firebase（$ FirebaseArray）。我想显示一个图表，显示属性显示completed: true的项目对象与属性显示completed: false的对象之间的对比。为了做到这一点，我必须为每种项目创建两个不同的数组。

我可以设法console.log这些数组的结果，但是我很难通过$ scope在DOM中显示这些数组，更不用说将它们输入到Angular-ChartJS脚本中了。

以下是我的Firebase的样子：

{
  "items": {
    "KUnjnUG90g4Ms_pkbC5": {
      text: "I need to do my hw",
      dueDate: 1477647527093,
      hoursToFinish: 1,
      minutesToFinish: 5,
      importance: "job depends on it",
      completed: true,
      pastDue: true,
      urgent: true,
      rank: 4089044218,
      created_at: 1477263177719
    },
   "KUq51IiPh4RgaC_v0Rg": {
      text: "asdf",
      dueDate: 1477647527093,
      hoursToFinish: 1
      minutesToFinish: 5
      importance: "pretty important"
      completed: false,
      pastDue: true
      urgent: true
      rank: 3792736666
      created_at: 1477302560019
    }
  }
}

工厂处理相关控制器的ref：

listo.factory("ItemCrud", ["$firebaseArray",
  function($firebaseArray) {

    var ref = new Firebase("database");
    var items = $firebaseArray(ref);
    ...

    return {
      getAllItems: function() {
        return items;
      }
    }
    ...
  }
]);

以下是具有相关查询的控制器（$scope.updateArrays）：

listo.controller('UserCtrl', ["$scope", "ItemCrud", "$rootScope", "$interval", "$log", "$http", "$locale", "$templateCache", '$timeout',
   function($scope, ItemCrud, $rootScope, $interval, $log, $http, $locale, $templateCache, $timeout) {

  $scope.items = ItemCrud.getAllItems();

  $scope.completeItems = [];
  $scope.incompleteItems = [];

  $scope.updateArrays = function() {
    var items = ItemCrud.getAllItems();
    items.$loaded().then(function(items) {

      items.$ref().orderByChild("q_completed").equalTo(true).on("value", function(snapshot) {
        console.log("updateArrays called");

        var completeItems = [];
        completeItems = Object.keys(snapshot.val());

        if (snapshot.exists()) {
          console.log("found", completeItems);
          return completeItems;
        } else {
          console.warn("completeItems was not found.");
          return [];
        }

      });

      items.$ref().orderByChild("q_completed").equalTo(false).on("value", function(snapshot) {

        var incompleteItems = [];
        incompleteItems = Object.keys(snapshot.val());

        if (snapshot.exists()) {
          console.log("found", incompleteItems);
          return incompleteItems;
        } else {
          console.warn("incompleteItems was not found.");
          return [];
        }

      });

      return {
        incompleteItems: incompleteItems,
        totalIncompleteItems: incompleteItems.length,
        completeItems: completeItems,
        totalCompleteItems: completeItems.length
      }

    });
  };

 }
]);

简单地问我的问题：为了在我的DOM上显示$scope.updateArrays().totalIncompleteItems和$scope.updateArrays().totalCompleteItems，我需要进行哪些编码？

也就是说，如何才能显示以下内容：

<section ng-controller="UserCtrl" class="user">
    {{$scope.updateArrays().totalIncompleteItems}} and {{$scope.updateArrays().totalCompleteItems}}
</section>

截至目前，在我的应用程序中，这些都没有显示。但是，console.log里面的$scope.updateArrays()会将以下内容记录到我的控制台上：

updateArrays called
UserCtrl.js:495 found completeItems array ["-KUnjnUG90g4Ms_pkbC5", "-KUq51IiPh4RgaC_v0Rg", "-KUq6pXzElRP9JQC6AJB", "-KUq7WvMzH4FNaLdGL90"]
UserCtrl.js:510 found incompleteItems array ["-KVMv-hKRzk-WXv-KrOv", "-KVMv1nIC26elEBX7QA-", "-KVMv3qAtVNTW0j7sU8K", "-KVMv5smhYTeaDFGYmoh"]]

如果对Firebase查询有深入了解的人可以发布解决方案，我将非常感激。

Answer 1

你得到的是钥匙而不是价值。

修改以下代码

var completeItems = [];
completeItems = Object.keys(snapshot.val());

if (snapshot.exists()) {
  console.log("found", completeItems);
  return completeItems;
} else {
  console.warn("completeItems was not found.");
  return [];
}

进入这个。

snapshot.forEach(function(childSnapshot) {
  completeItems.push(childSnapshot.val());
});

console.log("found", completeItems);

对不完整的项目执行相同操作

Firebase：记录子项的$ scoping数组查询

1 个答案: