在非规范化数据结构列表中呈现每个孩子的信息

Question

假设students 的一些数据在不同schools 的类（groups）中：

{
  "students": {
    "alexa" : {
      "firstName" : "ReJina",
      "grade" : 2,
      "lastName" : "idk",
      ...
    },
    "bobby" : { ... },
    "chris" : { ... },
    ...
  },
  "schools": {
    "springfield" : {
      "name" : "Springfield Elementary",
      "location" : "123 Main St",
      ...
    },
    "quahog" : { ... },
    "zion" : { ... },
    ...
  },
  "group": {
    "one" : {
      "members" : {
        "alexa" : true,
        "bobby" : true,
        "chris" : true
      },
      "school" : {
        "springfield" : true
      },
      "name" : "Math Class"
    },
    "two" : {
      "members" : {
        "bart" : true,
        "lisa" : true,
        "meg" : true,
        ...
      },
      "school" : {
        "quahog" : true
      },
      "name" : "Art Class"
    },
    "three" : { ... },
    "four" : { ... },
    ...
  }
}

据我所知，这是以扁平方式构建数据的正确方法。如果这不正确，请告诉我。我在每个项目上保留相关列表，因此每个班级都需要一个名册 (members)，如果我还遇到学生在多个班级 (group) 或学校的情况，则需要班级列表以及他们就读的学校。

现在在HTML 中，我们需要一个视图来显示所有学校班级 (groups) 和每个班级中的学生以及嵌套在同一视图中的学生ng-repeat：

<div id="data-table-div" class="col-md-6">
  // Get all the groups, and show them one by one
  <div ng-repeat="group in groups">
    // This works  -  How do I get the school it is associated to?
    //                ??
    {{group.name}} - {{group's school's name}}

    //Start a table
    <table>
      <thead> <tr> <th>Student Name</th> <th>Grade</th> ... </thead>
      <tbody>
        // Get the students in each group, and show them one by one
        //                        ??
        <tr ng-repeat="student in groups.members">
          <td>{{student.name}}</td> <td>{{student.grade}}</td> ...
        </tr>
      </tbody>
    </table>
  </div>
</div>

在控制器中：

angular.module('sofDataViewerApp')
  .controller('dataTableController', function ($scope, $firebaseObject, $firebaseArray) {
    // This gets all of our groups.  It also allows `group.memebers` to render the appropriate number of `<tr>`s as it knows it has N students.
    var groupsRef = new Firebase("https://sof-data.firebaseio.com/studyGroups");
    $scope.groups = $firebaseArray(groupsRef);

    // This will give all the students. How do I get just the template's `group.members` to be each appropriate student?
    var studentsRef = new Firebase("https://sof-data.firebaseio.com/students");
    $scope.allStudents = $firebaseArray(studentsRef);
  });

问题：
如何让 HTML 模板正确迭代 groups' members 并且我可以访问每个 student 的所有数据（例如他们的 firstName 和 grade）？ （我假设它可能涉及控制器中更好的代码，也可能在 HTML 中）

PLNKR：http://plnkr.co/edit/uAn1Ky9v5NHHDFPs2c6S?p=preview （如果您知道如何在 plnkr 中注入 Firebase 和 angularFire，那么它应该可以工作，但是尽管包括了它们的 CDN，我仍然无法弄清楚...）

我能理解的最接近的解释是 Firebase 的 this page，他们建议使用 LINK_ID，但它没有被描述为他们的意思，特别是因为他们谈论不按 id 搜索。在我的例子中，link 是 group 的同义词，comment 是 student。

    var commentsRef = new Firebase("https://awesome.firebaseio-demo.com/comments");
    var linkRef = new Firebase("https://awesome.firebaseio-demo.com/links");
    var linkCommentsRef = linkRef.child(LINK_ID).child("comments");
    linkCommentsRef.on("child_added", function(snap) {
      commentsRef.child(snap.key()).once("value", function() {
        // Render the comment on the link page.
      });
    });

Answer 1

您似乎正在尝试加入多个“表”。使用 AngularFire 做到这一点的最好方法是扩展 $firebaseArray (link to docs)。有了这个，您可以在每个孩子被添加（或被修改）时从其他位置加载额外的数据。

另请参阅 Kato 的 this answer，它展示了扩展数组（尽管用于不同的用例）。

最后，您可以考虑将每个屏幕所需的数据复制到该屏幕的列表中。虽然 Firebase 检索连接数据的速度非常快（它保持打开的连接并可以通过管道传输多个请求），但如果您必须执行更少的请求来获取数据，它总是会更快。

如果您想显示组中的成员列表，例如：

"group": {
    "one" : {
      "members" : {
        "alexa" : "ReJina",
        "bobby" : "Robert",
        "chris" : "Christian"
        ...

因此，我们实际上不只是存储true，而是在此处存储每个成员的名字。这使我们可以通过一次读取操作获取所有数据以显示组成员：

ref.child('group/one/members').on('value'...

然后，当用户单击其中一个组成员时，我们会转到该组成员的页面并从 /students/$studentid 加载数据，并且可能有他们所属的组（以及这些组的名称) 也在下面..