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

Question

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

 --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；部分是因为你遇到的原因。我发现自己唯一一次像这样嵌套数据结构，是当用户通常 "inside" 这些顶级子项之一时。在那种情况下，最外层的 ID 是上下文的一部分，我不需要像你那样的嵌套循环。

也就是说，如果您确保 code/view 与数据结构正确匹配，您可以轻松地使它正常工作。由于您在一个集合（带有生成的 ID）中有一个集合（带有子 0 和 1），您需要 ng-repeats 才能到达 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 检索嵌套数据？

How to retrieve nested data with Angularjs ng-repeat in Firebase?

javascript

angularjs

firebase

angularfire