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

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

本文关键字：ng-repeat Angularjs 检索 嵌套 数据 Firebase      更新时间：2023-09-26

我很难用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>

爪哇语

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

也就是说，如果确保代码/视图与数据结构正确匹配，则可以轻松地使代码/视图正常工作。由于集合（包含子项 0 和 1）位于集合（具有生成的 ID）中，因此需要ng-repeat s 才能到达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 数据正确绑定到视图后，在大多数用例中它应该会自动更新。

相关文章：