Javascript 使用ng repeat创建AngularJS表
我从数据库中得到以下响应。关于类数组，其中类嵌套在组中，最后嵌套在学生中Javascript 使用ng repeat创建AngularJS表,javascript,angularjs,html-table,angularjs-ng-repeat,Javascript,Angularjs,Html Table,Angularjs Ng Repeat,我从数据库中得到以下响应。关于类数组，其中类嵌套在组中，最后嵌套在学生中 "Response":[ { "Id":1,"Name":"Class 1","Location":"Building 1","Groups":[ { "Id":1,"Name":"GB1","Students":[ { "Id":1,"Name":"Mike","RollNo":"1","Performance":
"Response":[
{
"Id":1,"Name":"Class 1","Location":"Building 1","Groups":[
{
"Id":1,"Name":"GB1","Students":[
{
"Id":1,"Name":"Mike","RollNo":"1","Performance":{
"Id":1,"Math":"90","Physics":"70","English":"60"
}
},{
"Id":2,"Name":"John","RollNo":"2","Performance":{
"Id":2,"Math":"90","Physics":"70","English":"60"
}
},{
"Id":3,"Name":"Muffin","RollNo":"3","Performance":{
"Id":3,"Math":"90","Physics":"90","English":"90"
}
}
]
}, {
"Id":2,"Name":"GB2","Students":[
{
"Id":4,"Name":"Ema","RollNo":"1","Performance":{
"Id":4,"Math":"90","Physics":"70","English":"60"
}
},{
"Id":5,"Name":"Sunny","RollNo":"2","Performance":{
"Id":5,"Math":"90","Physics":"70","English":"60"
}
},{
"Id":6,"Name":"Jen","RollNo":"3","Performance":{
"Id":6,"Math":"90","Physics":"90","English":"90"
}
}
]
}
]
},{
"Id":2,"Name":"Class 2","Location":"Building 1","Groups":[
{
"Id":3,"Name":"G1","Students":[
{
"Id":7,"Name":"Ron","RollNo":"1","Performance":{
"Id":7,"Math":"90","Physics":"70","English":"60"
}
},{
"Id":8,"Name":"Kaka","RollNo":"2","Performance":{
"Id":8,"Math":"90","Physics":"70","English":"60"
}
},{
"Id":9,"Name":"Mark","RollNo":"3","Performance":{
"Id":9,"Math":"90","Physics":"90","English":"90"
}
}
]
}, {
"Id":4,"Name":"G2","Students":[
{
"Id":10,"Name":"Lily","RollNo":"1","Performance":{
"Id":10,"Math":"90","Physics":"70","English":"60"
}
},{
"Id":11,"Name":"Lina","RollNo":"2","Performance":{
"Id":11,"Math":"90","Physics":"70","English":"60"
}
},{
"Id":12,"Name":"Linda","RollNo":"3","Performance":{
"Id":12,"Math":"90","Physics":"90","English":"90"
}
}
]
}
]
}
]
有人能帮我用ng repeat和angularjs来做这个吗？无法确定如何动态合并此列。到目前为止，我使用展平阵列选项完成了最后一部分 要解决此问题，您需要在
，而不是在大部分时间内重复
。除此之外，围绕对象进行解析并以您想要的方式对齐它们是相当繁琐的工作
以下是plnkr：
我不擅长css。也许你可以做点什么。虽然在这个解决方案中我不得不添加一些JavaScript方法，但我仍然希望看到一个更好的解决方案，并接受它作为答案
<!DOCTYPE html>
<html ng-app = "demo">
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller = "demoCtrl">
<h1>Hello Plunker!</h1>
<br>
<table>
<tr>
<td>Class name</td>
<td colspan="{{lengthCount(r)}}" ng-repeat ="r in response" >
{{r.Name}}
</td>
</tr>
<tr>
<td>Group name</td>
<td colspan="{{gr.Students.length}}" ng-repeat ="gr in Groups" >
{{gr.Name}}
</td>
</tr>
<tr>
<td>Student name</td>
<td ng-repeat ="st in Studs" >
{{st.Name}}
</td>
</tr>
<tr>
<td>Maths</td>
<td ng-repeat ="st in Studs" >
{{st.Performance.Math}}
</td>
</tr>
<tr>
<td>Physics</td>
<td ng-repeat ="st in Studs" >
{{st.Performance.Physics}}
</td>
</tr>
<tr>
<td>English</td>
<td ng-repeat ="st in Studs" >
{{st.Performance.English}}
</td>
</tr>
</table>
<br>
</body>
</html>
你好，普朗克！
类名
{{r.Name}}
组名
{{gr.Name}
学名
{{st.Name}}
数学
{{st.Performance.Math}
物理
{{st.Performance.Physics}}
英语
{{st.Performance.English}
代码在这里
angular.module("demo",[])
.controller("demoCtrl", ['$scope', function($scope){
$scope.response = response;
function flattenArray(array, fn) {
var output = [];
console.log("<i was flatten here");
for (var i = 0; i < array.length; ++i) {
var result = fn(array[i]);
if (result)
output = output.concat(result);
}
return output;
}
$scope.lengthCount = function(obj) {
var k = 0;
console.log("<i was flatten here");
for (var i = 0; i < obj.Groups.length; ++i) {
k= k+ obj.Groups[i].Students.length;
}
return k;
}
$scope.Groups = flattenArray($scope.response, function (item) {
console.log("<i was here");
return item.Groups;
});
$scope.Studs = flattenArray($scope.Groups, function (item) {
console.log("<i was here");
return item.Students;
});
}]);
var response = [{
"Id":1,"Name":"Class 1","Location":"Building 1","Groups":[
{
"Id":1,"Name":"GB1","Students":[
{
"Id":1,"Name":"Mike","RollNo":"1","Performance":{
"Id":1,"Math":"90","Physics":"70","English":"60"
}
},{
"Id":2,"Name":"John","RollNo":"2","Performance":{
"Id":2,"Math":"90","Physics":"70","English":"60"
}
},{
"Id":3,"Name":"Muffin","RollNo":"3","Performance":{
"Id":3,"Math":"90","Physics":"90","English":"90"
}
}
]
}, {
"Id":2,"Name":"GB2","Students":[
{
"Id":4,"Name":"Ema","RollNo":"1","Performance":{
"Id":4,"Math":"90","Physics":"70","English":"60"
}
},{
"Id":5,"Name":"Sunny","RollNo":"2","Performance":{
"Id":5,"Math":"90","Physics":"70","English":"60"
}
},{
"Id":6,"Name":"Jen","RollNo":"3","Performance":{
"Id":6,"Math":"90","Physics":"90","English":"90"
}
}
]
}
]
},{
"Id":2,"Name":"Class 2","Location":"Building 1","Groups":[
{
"Id":3,"Name":"G1","Students":[
{
"Id":7,"Name":"Ron","RollNo":"1","Performance":{
"Id":7,"Math":"90","Physics":"70","English":"60"
}
},{
"Id":8,"Name":"Kaka","RollNo":"2","Performance":{
"Id":8,"Math":"90","Physics":"70","English":"60"
}
},{
"Id":9,"Name":"Mark","RollNo":"3","Performance":{
"Id":9,"Math":"90","Physics":"90","English":"90"
}
}
]
}, {
"Id":4,"Name":"G2","Students":[
{
"Id":10,"Name":"Lily","RollNo":"1","Performance":{
"Id":10,"Math":"90","Physics":"70","English":"60"
}
},{
"Id":11,"Name":"Lina","RollNo":"2","Performance":{
"Id":11,"Math":"90","Physics":"70","English":"60"
}
},{
"Id":12,"Name":"Linda","RollNo":"3","Performance":{
"Id":12,"Math":"90","Physics":"90","English":"90"
}
}
]
}
]
}
]
angular.module（“演示”，[]）
.controller（“demoCtrl”、[“$scope”、函数（$scope）{
$scope.response=响应；
函数数组（数组，fn）{
var输出=[]；
console.log（“您好，谢谢您的回答。我想知道是否可以使用colspan制作解决方案。但这一个看起来也很棒！不客气！如果您想使用colspan，可以使用colspan，只需确保将您的ng repeat
放置在正确的单元格中即可。”