Angularjs - 合并父母和孩子之间的范围数据 - 时间表项目
问题描述：
我返工我的代码，以角为香港专业教育学院用JavaScript/jQuery的逻辑做一个时间表项目。我试图利用角函数来让一切顺利进行，但我对如何在ng-repeat表上工作感到困惑。Angularjs - 合并父母和孩子之间的范围数据 - 时间表项目
我有什么是我保持时间表数据（子数据），然后将主数据（母公司数据）两个独立的数据集。子数据包含父代的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中重复这个复杂。有谁会知道一个简单的方法来完成相同的任务吗？
答
我已更新您的plunker以使用Angular。我希望你会同意这在Angular vs jquery/js中更容易和更易读。
https://jsfiddle.net/tj6bcjos/13/
的标记：
<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>
<tr ng-repeat="entry in mergedSet">
<td>{{entry.id}}</td>
<td>{{entry.description}}</td>
<td>
<ul>
<li ng-repeat="start in entry.start track by $index">{{start}}</li>
</ul>
</td>
<td>
<ul>
<li ng-repeat="end in entry.end track by $index">{{end}}</li>
</ul>
</td>
<td>
<ul>
<li ng-repeat="hour in entry.hours track by $index">{{hour}}</li>
</ul>
</td>
<td>
<ul>
<li ng-repeat="don in entry.dayOrNight track by $index">{{don}}</li>
</ul>
</td>
</tr>
</tbody>
</table>
脚本：
(function() {
'use strict';
var app = angular.module('DemoApp', []);
app.controller('DemoCtrl', DemoCtrl);
DemoCtrl.$inject = ['$scope', 'DemoService'];
function DemoCtrl($scope, DemoService) {
var parentSet = [];
var childSet = [];
var mergedSet = [];
DemoService.pathOne()
.then(function(result) {
parentSet = result.d.results;
DemoService.pathTwo()
.then(function(result) {
childSet = result.d.results;
processData();
});
});
function processData() {
angular.forEach(parentSet, function(parent) {
var mergeObject = {
description: "",
start: [],
end: [],
hours: [],
dayOrNight: []
};
var children = childSet.filter(function(child) {
return child.ID_of_parent == parent.ID;
});
angular.forEach(children, function(child) {
mergeObject.start.push(child.Start);
mergeObject.end.push(child.End);
mergeObject.hours.push(child.Hours);
mergeObject.dayOrNight.push(child.Day_or_night);
});
mergeObject.id = parent.ID;
mergeObject.description = parent.description;
mergedSet.push(mergeObject);
});
$scope.mergedSet = mergedSet;
}
}
app.service('DemoService', DemoService);
DemoService.$inject = ['$q'];
function DemoService($q) {
var DemoService = this;
DemoService.pathOne = pathOne;
DemoService.pathTwo = pathTwo;
function pathOne() {
var deferred = $q.defer();
deferred.resolve({
d: {
results: [{
ID: "17",
description: "Description 1"
}, {
ID: "22",
description: "Description 2"
}, {
ID: "34",
description: "Description 3"
}, {
ID: "54",
description: "Description 4"
}]
}
});
return deferred.promise;
}
function pathTwo() {
var deferred = $q.defer();
deferred.resolve({
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"
}]
}
});
return deferred.promise;
}
}
})();
答
这可以这样写。
首先编写使用ng-repeat并呈现了饭桌变量说timesheet
现在宣布timesheet在你的controller空数组的模板。像$scope.timesheet = []
接着在processData函数，而不是形成rw和appending，它推到一个临时变量，最后将其分配给$scope.timesheet。如果UI正确绑定到timesheet变量，那么数据将自动显示。
+0
感谢您的快速反应，这对我来说很有意义但是即时通讯停留在如何将孩子合并到正确的父母，以便ng-repeat可以将其视为数据的一个来源。我对如何推送数据感到困惑，以便匹配的子/父数据在一个范围内正确地放在一起。我会努力争取到目前为止所取得的成果，也许为此创造另一个话题。 –
终于来测试我的环境中的代码，并工作得很好。非常感谢你，你的版本让事情变得更简单。 –