在非规范化的数据结构的列表，渲染每个孩子的信息 [英] Rendering information of each child in a list of a denormalized data structure
问题描述
让说有学生是在课堂上的一些数据（组）的不同<$ C $的C>学校：
{
学生们： {
Alexa的：{
名字：ReJina
品位：2，
姓氏：IDK的
...
}，
巴比：{...}，
克里斯：{...}，
...
}，
学校：{
斯普林菲尔德：{
名：斯普林菲尔德小学
位置：123主街
...
}，
quahog：{...}，
锡安：{...}，
...
}，
群：{
一：{
成员：{
Alexa的：真实，
鲍比：真实，
克里斯：真
}，
学校：{
斯普林菲尔德：真
}，
名：数学类
}，
二：{
成员：{
巴特：真实，
丽萨：真实，
MEG：真实，
...
}，
学校：{
quahog：真
}，
名：艺术类
}，
三化：{...}，
四个一：{...}，
...
}
}
据我所知，这是结构化的数据在一个平面的方式的正确方法。请让我知道这是不正确。我一直对每个项目的相关名单，因此每类需要名册（成员），如果我也有过，其中一个学生是多个类的情况（组）或学校，这些都需要的班级和学校，他们参加名单。
现在在 HTML ，我们需要有一个视图，显示所有的学校类（组）和学生在每个班级，学生在同一视图中可以包含一个 NG-重复：
＆LT; DIV ID =数据表格级=COL-MD-6＆GT;
//获取所有的组，一个展示他们彼此
＆LT; DIV NG重复=成群组＆GT;
//这工作 - 我如何得到它关联到学校？
//？
{{group.name}} - {{组的学校的名字}} //开始一个表
＆LT;表＆gt;
＆LT;＆THEAD GT; ＆所述; TR＆GT; ＆LT;第i个学生姓名＆LT; /第i ＆LT;第i级＆LT; /第i ...＆LT; / THEAD＆GT;
＆LT;＆TBODY GT;
//获取各组学生和一个展示他们彼此
//？
＆LT; TR NG重复=学生groups.members＆GT;
＆所述; TD＆GT; {{student.name}}＆下; / TD＆GT; ＆所述; TD＆GT; {{student.grade}}＆下; / TD＆GT; ...
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
和控制器：
angular.module（'sofDataViewerApp'）
.controller（'dataTableController'，函数（$范围，$ firebaseObject，$ firebaseArray）{
//这得到我们所有的群体。它也允许`group.memebers`呈现`＆LT适当数量; TR＆GT;单曲，因为它知道它有N个学生。
VAR groupsRef =新的火力地堡（https://sof-data.firebaseio.com/studyGroups）;
$ scope.groups = $ firebaseArray（groupsRef）; //这将给所有的学生。我如何得到公正模板的`group.members`是每个学生恰当？
VAR studentsRef =新的火力地堡（https://sof-data.firebaseio.com/students）;
$ scope.allStudents = $ firebaseArray（studentsRef）;
}）;
问：结果
我如何获得HTML模板正确遍历组 成员，我要所有的数据访问每个学生（比如他们的的firstName 和等级） ？ （我假设它可能涉及的控制器，并可能在HTML更好code）
PLNKR： http://plnkr.co/edit/uAn1Ky9v5NHHDFPs2c6S?p=preVIEW
（如果你知道如何在plnkr注入火力地堡和angularFire，那么它应该工作，但我还是不能明白这一点，尽管其中包含的CDN ...）
我可以理解最接近的解释是在此页通过火力地堡，他们建议使用 LINK_ID ，但他们的意思，尤其因为他们谈论没有ID搜索它没有说明。在我的情况下，链接将代名词组和注释将是学生。
VAR commentsRef =新的火力地堡（https://awesome.firebaseio-demo.com/comments）;
VAR linkRef =新的火力地堡（https://awesome.firebaseio-demo.com/links）;
VAR linkCommentsRef = linkRef.child（LINK_ID）.child（意见）;
linkCommentsRef.on（child_added功能（SNAP）{
commentsRef.child（snap.key（））。一次（价值，函数（）{
//渲染的链接页面上的评论。
}）;
}）;
它看起来像你想加入多个表。最好的办法做到这一点与AngularFire是通过延长 $ firebaseArray （<一个href=\"https://www.firebase.com/docs/web/libraries/angular/guide/extending-services.html#section-firebasearray\"相对=nofollow>链接文档）。有了这个，你可以从其他位置加载额外的数据，每个孩子得到补充（或修改）。
另请参阅<一个href=\"http://stackoverflow.com/questions/30299972/joining-data-between-paths-based-on-id-using-angularfire\">this从该展示延伸的阵列（尽管用于不同的用例）加藤回答的。
最后，可以考虑复制所必需的每个屏幕到列表该屏幕上的数据。虽然火力地堡是pretty快速检索连接的数据（它保持一个开放的连接，并可以管多个请求），它总是会更快，如果你要做较少的请求来获取数据。
这方面的一个例子是，如果要在一组显示成员的列表：
组：{
一：{
成员：{
Alexa的：ReJina
鲍比：罗伯特，
克里斯：基督徒
...
因此，而不是只是存储真正，我们实际存储的每个成员的名字在这里。这使我们能够得到的所有数据，显示该组成员的单个读取操作：
ref.child（'组/一个/成员）。在（价值......
然后，当该组成员之一的用户点击，我们会去到该组成员的页面，并从加载数据/生/ $ studentid 和可能有他们是一部分的群体（那些团体的名称）下有太多..
Let say there is some data of students that are in classes (groups) of different schools:
{
"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" : { ... },
...
}
}
To my knowledge this is the proper way of structuring data in a flat way. Please let me know if this is incorrect. I keep the associated lists on each item, so each class needs a roster (members) and if I also had the situation where a student was in more than one class (group) or school, those would need lists of classes and schools they attend.
Now in the HTML we need to have a view that shows all of the schools classes (groups) and the students in each class and the students in the same view with a nested 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>
And in the controller :
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);
});
Question:
How do I get the HTML template to properly iterate over the groups' members and I have access to all of the data of each student (such as their firstName and grade)? (I am assuming it may involve better code in the controller and possibly in the HTML)
PLNKR: http://plnkr.co/edit/uAn1Ky9v5NHHDFPs2c6S?p=preview (If you know how to inject Firebase and angularFire in the plnkr, then it should work, but I still can't figure that out despite including the CDN of them...)
The closest explanation I can understand is on this page by Firebase, they suggest using a LINK_ID, but it is not described as what they mean, esp since they talk about not searching by id. In my case, a link would be synonymous with group and a comment would be a 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.
});
});
It looks like you're trying to join multiple "tables". The best way to do that with AngularFire is by extending $firebaseArray (link to docs). With this you can load the additional data from the other locations as each child get added (or is modified).
Also see this answer from Kato that show extending an array (although for a different use-case).
Finally you can consider duplicating the data that is necessary for each screen into the list for that screen. While Firebase is pretty fast to retrieve joined data (it keeps an open connection and can pipeline multiple requests), it will always be faster if you have to do fewer requests to get the data.
An example of this would be if you want to display a list of the members in a group:
"group": {
"one" : {
"members" : {
"alexa" : "ReJina",
"bobby" : "Robert",
"chris" : "Christian"
...
So instead of just storing true, we actually store the first name of each member here. This allows us to get all the data to show the group members with a single read operation:
ref.child('group/one/members').on('value'...
Then when the user clicks on one of the group members, we'd go to that group member's page and load the data from /students/$studentid and possible have the groups that they're part of (and the names of those groups) under there too..
这篇关于在非规范化的数据结构的列表，渲染每个孩子的信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
