CODEWITHSUNDEEP
javascripthtmlangularjshtml-table
user3094013
user3094013

Reputation: 25

How to group and rowspan in angular js

I have a Json given below

[{
    groupName: "Group 1",
    [{
        name: "Item 1"
    }, {
        name: "Item 2"
    }]
},
{
    groupName: "Group 2",
    [{
        name: "Item 3"
    }, {
        name: "Item 4"
    }]
}]

I need a table like shown here , how can this be achieved in angular js.

Upvotes: 1

Views: 506

Answers (3)

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48437

You have to use ng-repeat directive in order to render information into table.

var myApp = angular.module('myApp', []);

function myCTRL($scope) {
    $scope.groups = [{
      groupName: "Group 1",
      sub: [{
        name: "Item 1"
      }, {
        name: "Item 2"
      }]
    },
    {
      groupName: "Group 2",
      sub: [{
        name: "Item 3"
      }, {
        name: "Item 4"
      }]
    }
  ];
}
td,th{
  border:1px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCTRL">
   <table>
            <tr>
              <th>Group</th>
              <th>Items</th>
            </tr>
            <tr ng-repeat="group in groups" >
              <td>{{group.groupName}}</td>
              <td >
                 <table>
                    <tr ng-repeat="subgroup in group.sub">
                    <td>{{subgroup.name}}</td>
                   </tr>
                 </table>
              </td>
            </tr>
          </table> 
</div>

Upvotes: 2

George
George

Reputation: 6739

Here is my solution

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.data = [{
      groupName: "Group 1",
      nestedData: [{
        name: "Item 1"
      }, {
        name: "Item 2"
      }]
    },
    {
      groupName: "Group 2",
      nestedData: [{
        name: "Item 3"
      }, {
        name: "Item 4"
      }]
    }
  ];
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table class="table">
    <thead>
      <th>Name</th>
      <th>Nested name</th>
    </thead>
    <tbody ng-repeat="item in data">
          <tr ng-repeat="nestedItem in item.nestedData">
            <td rowspan="{{item.nestedData.length}}" ng-hide="$index == 1">{{item.groupName}}</td>
            <td>{{nestedItem.name}}</td>
          </tr>
    </tbody>
  </table>
</div>

Upvotes: 2

Mistalis
Mistalis

Reputation: 18309

I keep your JSON structure, but just gave name vals to the child array:

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.data = [{
    groupName: "Group 1",
    vals: [{
      name: "Item 1"
    }, {
      name: "Item 2"
    }]
  }, {
    groupName: "Group 2",
    vals: [{
      name: "Item 3"
    }, {
      name: "Item 4"
    }]
  }];
});
table,
th,
td {
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<table ng-app="app" ng-controller="ctrl">
  <thead>
    <td><strong>Group</strong></td>
    <td><strong>Items</strong></td>
  </thead>
  <tbody ng-repeat="d in data">
    <tr>
      <td rowspan="{{d.vals.length}}">{{d.groupName}}</td>
      <td>{{d.vals[0].name}}</td>
    </tr>
    <tr ng-repeat="v in d.vals" ng-if="$index > 0">
      <td>{{v.name}}</td>
    </tr>
  </tbody>
</table>

Demo on JSFiddle

Upvotes: 2

Related Questions