Question

我很难用AngularJS从Firebase检索嵌套数据。我尝试以这种方式在Firebase中保存数据，顺便说一句，我使用Angularfire来保存和检索数据库中的数据。如何用ng-repeat检索foo的值？我还发现文档很少，教程已经过时了。我喜欢实时更新，这就是我想要使用它的原因。控制台btw没有错误。提前感谢任何建议。

 --Unique id   
      --0
         --foo:"bar"   
      --1
         --foo:"bar"

现在，当我在HTML中执行此操作时，它会返回索引编号：

<div ng-repeat="(item, id) in list">
    <span>{{item}}</span><button ng-click="remove(id)">x</button>
    </div>
</div>

但是当我这样做时，它并没有给我foo的值：

<div ng-repeat="(item, id) in list">
    <span>{{item.foo}}</span><button ng-click="remove(id)">x</button>
    </div>
</div>

的Javascript

angular.module("app", ['firebase'])
    .controller("ctrl", function ($firebase, $scope) {

    var ref = new Firebase('https://testing12344.firebaseio.com/');
    var x=[{foo:"bar"}, {foo:"bar"}];
    var sync = $firebase(ref);
    var list = sync.$asArray();
    list.$add(x);

    $scope.list = list;
        console.log($scope.list);
    $scope.remove = function (id){
        list.$remove(id);
        }   

    })

Answer 1

正如我已经评论过：Firebase's documentation recommends against building nested data structures;部分是因为你遇到的原因。我发现自己嵌套这样的数据结构的唯一一次是当用户通常在这些顶级子级中的一个“内部”时。在这种情况下，最外层的ID是上下文的一部分，我不需要像你那样使用嵌套循环。

也就是说，如果确保它与数据结构正确匹配，您可以轻松地使代码/视图工作。由于您在集合中有一个集合（包含子项0和1）（包含生成的ID），因此您需要ng-repeat才能到达foo：

    <ol>
        <li ng-repeat="item in list">
            {{item.$id}}
            <ol>
                <li ng-repeat="child in item">{{child}}</li>
            </ol>
        </li>
    </ol>

输出中的代码段：

1. -Jgv9EmOXmXYNrYPG8jK
    1. {"foo":"bar"}
    2. {"foo":"bar"}
2. -Jgv9GEXJLnaQmYeYR2u
    1. {"foo":"bar"}
    2. {"foo":"bar"}
3. -JgvHQ1YJsgF9THdfmd7
    1. {"foo":"bar"}
    2. {"foo":"bar"}

我还注意到你正在记录console.log($scope.list);，这是一个常见的错误。在执行console.log语句时，可能尚未从Firebase的服务器加载数据。有时它会在浏览器的JavaScript控制台中正确显示，但有时却没有。

加载数据后记录数据的正确方法是：

list.$loaded().then(function(list) { 
    console.log('Initial child count', list.length); 
    console.log(list[0][0].foo); 
});

请注意，$loaded只会触发最初下载的数据，而不会触发后续更新。如果您关心这些，您应该查看AngularFire的$watch。但说实话：你通常不需要那样做。将AngularFire数据正确绑定到视图后，它应该在大多数用例中自动更新。

如何在Firebase中使用Angularjs ng-repeat检索嵌套数据？

1 个答案: