All geek questions in one place

Creating an AngularJS table using ng-repeat

I get the following response from the database. about an 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. enter image description here Can someone help me do this using ng-repeat and angularjs? can't figure out how to combine these columns dynamically. So far, I have managed to complete the last part using the flatten array option.

+5
source share
2 answers

Although I had to add a few JavaScript methods in this solution, I still expect to see a better solution and accept it 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" } } ] } ] } ]
+2
source

To solve this problem, you will need more ng-repeat inside <td> instead of <tr> for most of the time. In addition, this is a rather tedious job analyzing your object and aligning it as you wish.

Here is plnkr: http://plnkr.co/edit/aNVrMa4E8gLkVYlxzdHF?p=preview

I am poor in css. Maybe you can do something about it.

+4
source

Source: https://habr.com/ru/post/1200661/

More articles:


All Articles