无法以角度过滤从firebase返回的数组

时间:2014-09-18 01:56:50

标签: javascript angularjs firebase

这是html:

    <div ng-controller="FilterController as ctrl">
      <div>
    All entries:
    <span ng-repeat="entry in ctrl.array">{{entry.from}} </span>
  </div>
  <div>
    Entries that contain an "a":
    <span ng-repeat="entry in ctrl.filteredArray">{{entry.from}} </span>
  </div>
</div>

这是我的剧本:

angular.module('myApp', ["firebase"]).
  controller('FilterController', ['filterFilter', '$firebase', function(filterFilter,       $firebase) {
   var ref = new Firebase("https://******.firebaseio.com/");
   this.array = $firebase(ref).$asArray();
   this.filteredArray = filterFilter(this.array, 'a');
  }]);

filteredArray的结果只是空的。我做错了什么?非常感谢任何见解。

1 个答案:

答案 0 :(得分:0)

数据以异步方式加载。这是JavaScript 101,在尝试处理Angular和Firebase之前,您应该花一点时间在异步操作上。

您的过滤器调用可能甚至在请求发送到服务器之前发生,因此该数组仍为空。

您可以使用$ loaded方法等待下载初始数据。但是,过滤后的结果仍然是静态的,会绕过实时功能。

this.array.$loaded(function() {
   console.log(this.array.length); // current length at time of loading
});
console.log(this.array.length); // 0, hasn't loaded yet

一般来说,你不应该在代码级别做这样的事情,而是让Angular和Firebase发挥他们的魔力;把它移到视图中:

<li ng-repeat="item in array | filter:searchText" />

如果您发现自己试图操纵控制器中的数组来转换数据,请查看$ extendFactory。但大多数情况下,只要不管它并将其绑定到范围,然后让Angular处理剩下的事情。