javascript - 如何在 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 ;部分是因为你遇到的原因。我发现自己嵌套这样的数据结构的唯一一次是当用户通常位于这些顶级子级之一“内部”时。在这种情况下，最外面的 ID 是上下文的一部分，我不需要像您一样的嵌套循环。

也就是说，如果您确保代码/ View 正确匹配数据结构，您可以轻松地使代码/ View 工作。由于您在集合(具有生成的 ID)内有一个集合(具有子级 0 和 1)，因此您需要 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 数据正确绑定(bind)到 View 后，它应该在大多数用例中自动更新。