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

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

我真的很难用 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);
        }   

    })  

正如我已经评论过的: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 数据正确绑定到视图,它应该在大多数用例中自动更新。