Angularjs Table Creation With Ng-repeat

May 30, 2024 Post a Comment

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'

Solution 1:

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.

Solution 2:

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><htmlng-app = "demo"><head><scriptdata-require="angular.js@*"data-semver="1.3.0-beta.5"src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script><linkhref="style.css" /><scriptsrc="script.js"></script></head><bodyng-controller = "demoCtrl"><h1>Hello Plunker!</h1><br><table><tr><td>Class name</td><tdcolspan="{{lengthCount(r)}}"ng-repeat ="r in response"  >
           {{r.Name}}
         </td></tr><tr><td>Group name</td><tdcolspan="{{gr.Students.length}}"ng-repeat ="gr in Groups"  >
           {{gr.Name}}
         </td></tr><tr><td>Student name</td><tdng-repeat ="st in Studs"  >
           {{st.Name}}
         </td></tr><tr><td>Maths</td><tdng-repeat ="st in Studs"  >
           {{st.Performance.Math}}
         </td></tr><tr><td>Physics</td><tdng-repeat ="st in Studs"  >
           {{st.Performance.Physics}}
         </td></tr><tr><td>English</td><tdng-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;

        functionflattenArray(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"
              }
            }
          ]
        }
      ]
    }
    ]

javascript dox

Angularjs Table Creation With Ng-repeat

Solution 1:

Solution 2:

Post a Comment for "Angularjs Table Creation With Ng-repeat"