Menu
I get following response from database. about array of classes where classes are nested in groups and finally students.
"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"
}
}
]
}
]
}
]
Now I want to create a table like this using colspan.
Could anyone help me to do this using ng-repeat and angularjs ? can't figure out how to merge this columns dynamically. So far I managed to do last part using flatten array option.
270
Definition and Usage The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
Directives that Create Scopes In most cases, directives and scopes interact but do not create new instances of scope. However, some directives, such as ng-controller and ng-repeat, create new child scopes and attach the child scope to the corresponding DOM element.
The data-ng-repeat allows the HTML to be validated through validators that do not understand Angular. The documentation is here with directives. This is from the docs: Angular normalizes an element's tag and attribute name to determine which elements match which directives.
Angular-JS ng-repeat directive is a handy tool to repeat a set of HTML code for a number of times or once per item in a collection of items. ng-repeat is mostly used on arrays and objects.
To solve this problem, you will need to ng-repeat inside the <td> instead of <tr>, for most of the time. Other than that, it is just rather tedious work parsing around your object and align them in the manner you want.
Here is the plnkr: http://plnkr.co/edit/aNVrMa4E8gLkVYlxzdHF?p=preview
I am poor at css. Maybe you can do something about that.
131
Although in this solution I had to add add few JavaScript method I still expect to see a better solution and accept as an answer. DEMO
<!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>
Code goes here
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"
}
}
]
}
]
}
]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With