【问题标题】:Iterating through a firebase collection遍历 firebase 集合
【发布时间】:2015-01-26 15:47:37
【问题描述】:

我有一个存储在 firebase 中的项目集合,项目对象有两个属性,名称和选中。 我将所有项目都打印到视图中,并且它们每个都有一个复选框,可以将 selected 的属性更改为 true。 我在底部还有一个按钮,它绑定了一个函数,deleteSelected()。

我的想法是以某种方式遍历 firebase 对象,然后检查它们是否具有 selected=true 的属性,然后删除这些项目。我尝试在 firebase 对象上使用 $asObject() 函数,但出现此错误。

TypeError: undefined is not a function
 at new <anonymous> (controllers.js:17)
 at invoke (angular.js:3374)
 at Object.instantiate (angular.js:3386)
 at $get (angular.js:5902)
 at angular.js:5400
 at forEach (angular.js:220)
 at nodeLinkFn (angular.js:5387)
 at compositeLinkFn (angular.js:4911)
 at compositeLinkFn (angular.js:4914)
 at publicLinkFn (angular.js:4819)

如何遍历 firebase 对象?还是有更简单的方法来解决这个问题?

如果你想看看,这里是代码:Plunker

var firebaseRef = new Firebase("https://inkopslista.firebaseio.com/items");
//creates a firebase object that takes a reference to the firebase URL
var items = $firebase(firebaseRef);

$scope.items = items;

这是通过 ng-click 绑定到按钮的函数。

$scope.deleteSelected = function(){

    for(var i=0; i < items.length; i++){

        if(items[i].selected === true){
            console.log(items[i]);
        }
    }
};    

【问题讨论】:

  • 请在问题本身中包含产生问题的最少代码。仅仅指向一个 plunker 是不够的,尤其是当我尝试运行它时,那个 plunkr 会出现各种其他错误。 stackoverflow.com/help/mcve
  • 好的,谢谢。
  • 与我在下面的回答无关:我觉得您的问题是基于某些教程或课程。如果是这样的话,你能指出我的教程/课程吗?我想阅读更多关于它的内容,因为你不是第一个被作业卡住的人,也许我们可以做一些事情来帮助人们更有条理地完成作业。
  • 我目前没有学习教程,但我对 Angular 很陌生,我在 egghead.io 上观看了一些视频。

标签: angularjs firebase angularfire


【解决方案1】:

如果您的 Firebase 中有类似数组的结构,则应调用 $asArray 而不是 $asObject。 AngularFire 的 FirebaseArray 类(这是 $asArray 返回的)在幕后做了很多工作,以确保 Firebase 的有序集合很好地映射到 JavaScript 数组(这是 AngularJS 所期望的)。

从你的 plunker 修改:

var firebaseRef = new Firebase("https://your.firebaseio.com/items");

//creates a firebase object that takes a reference to the firebase URL
var items = $firebase(firebaseRef);

$scope.items = items.$asArray();

$scope.items.$loaded().then(function(array) {
    console.log('Initial items received from Firebase', array.length);
});

另见:Unable to get length of Firebase Objects

更新

您似乎使用的是真正旧版本的 Firebase 和 AngularFire。在 0.8 版中,类数组结构的处理得到了显着改进。如果你不升级,你最终会复制很多最近版本中引入的代码。

为了给您一些想法,我很快将您的控制器和视图放入 jsbin 中,并使其与最新版本的 AngularJS、Firebase 和 AngularFire 一起使用。

.controller("MainController", ["$scope", "$firebase", "$filter" , function($scope, $firebase, $filter){
    var firebaseRef = new Firebase("https://inkopslista.firebaseio.com/items");
    var items = $firebase(firebaseRef);
    $scope.items = items.$asArray();

    $scope.addItem = function(item){
        if(item === undefined){
            return null;
        }else{
            item.selected = false;
            $scope.items.$add(item);
        }    
        $scope.newItem = null;
    };


    $scope.deleteItem = function(id){
        $scope.items.$remove(id);
    };

    $scope.deleteSelected = function(){
        $scope.items.forEach(function(item) {
            if (item.selected) {
                $scope.items.$remove(item);
            }
        });
    };
}]);  

jsbin:http://jsbin.com/varoka/1/edit?html,js,output

【讨论】:

  • 我试过你的代码,但我仍然得到同样的错误,很奇怪。
  • 哎呀。我刚刚检查了您的 plunker 中的版本,发现您使用的是 AngularFire 0.7。当您使 Plunker 工作时,还需要一些时间将其更新到更新的版本。 $asArray() 是半年前在 AngularFire 0.8 中引入的。如果您现在正在学习教程,则没有理由坚持使用旧版本。
  • 是的.. 现在可以了!感谢您花时间帮助我。我想这个答案是正确的,因为它回答了我的问题。
猜你喜欢
  • 2021-03-05
  • 2021-04-23
  • 2014-04-11
  • 2018-02-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-06-23
相关资源
最近更新 更多