我正在将我的代码修改为 Angular 以用于我使用 javascript/jquery 逻辑完成的时间表项目。我正在尝试利用角度函数来使一切顺利进行,但我对如何在 ng-repeat 表上使其工作感到非常困惑。
我拥有的是 2 个单独的数据集,其中我保存了时间表数据(子数据),然后是主数据(父数据)。子数据包含父数据的 ID,我以这种方式链接它们,然后找出将数据合并到适当行的逻辑。
这是使用 javasript/jquery 的工作表: https ://jsfiddle.net/tj6bcjos/11/
<table class="table" id="my_table">
<thead>
<tr>
<td>ID</td>
<td>Description</td>
<td>Start</td>
<td>End</td>
<td>Hours</td>
<td>Day or Night?</td>
</tr>
</thead>
<tbody></tbody>
</table>
.
$.mockjax({
url: "Ajax/Path1",
contentType: "application/json;odata=verbose",
responseText: {
d: {
results: [{
ID: "17",
description: "Description 1"
}, {
ID: "22",
description: "Description 2"
}, {
ID: "34",
description: "Description 3"
}, {
ID: "54",
description: "Description 4"
}]
}
}
});
$.mockjax({
url: "Ajax/Path2",
contentType: "application/json;odata=verbose",
responseText: {
d: {
results: [{
ID_of_parent: "17",
Day_or_night: "day",
Start: "2016-06-01 08:00",
End: "2016-06-01 10:00",
Hours: "2"
}, {
ID_of_parent: "17",
Day_or_night: "day",
Start: "2016-06-01 13:00",
End: "2016-06-01 14:00",
Hours: "1"
}, {
ID_of_parent: "17",
Day_or_night: "night",
Start: "2016-06-01 21:00",
End: "2016-06-01 22:00",
Hours: "1"
}, {
ID_of_parent: "22",
Day_or_night: "day",
Start: "2016-06-01 09:00",
End: "2016-06-01 10:00",
Hours: "1"
}, {
ID_of_parent: "22",
Day_or_night: "day",
Start: "2016-06-01 14:00",
End: "2016-06-01 15:00",
Hours: "1"
}, {
ID_of_parent: "54",
Day_or_night: "day",
Start: "2016-06-01 13:30",
End: "2016-06-01 16:00",
Hours: "2.5"
}]
}
}
});
data_array = {};
data1=null
data2=null//1 is parent, 2 is child
$.ajax({
url:"Ajax/Path1",
dataType: "json",
cache: false,
success: function (data) {
data1 = data
if(data1!=null && data2 !=null)
{
processData();
}
}//sucess end
});
$.ajax({
url:"Ajax/Path2",
dataType: "json",
cache: false,
success: function (data) {
data2 = data;
if(data1!=null && data2 !=null)
{
processData();
}
}
});
//can only process if both data1 and 2 are available
function processData()
{
$(data1.d.results).each(function(i,p){ //loop thru parents
pId = p.ID;
//bring back the match children
children = data2.d.results.filter(function(d){
return d.ID_of_parent == pId
})
s=[]
e=[]
h=[]
n=[] //start, end hours...
$(children).each(function(i,c)
{
s.push(c.Start);
e.push(c.End);
h.push(c.Hours);
n.push(c.Day_or_night);
})
rw = '<tr><td>'+p.ID+'</td><td>'+p.description+'</td><td>'+
s.join('<br>')+'</td><td>'+e.join('<br>')+'</td><td>'+h.join('<br>')
+'</td><td>'+n.join('<br>')+'</td></tr>'
console.log(rw)
$('#my_table tbody').append(rw);
})
}
对于我的一生,我无法弄清楚逻辑应该如何在 ng-repeat 这个复杂的情况下进行。有人知道完成相同任务的简单方法吗?