CODEWITHSUNDEEP
javascriptjsonangularjshtml
Amina Yousuf
Amina Yousuf

Reputation: 115

Generate html table using angular

I want to generate html table using angular.I have a json object and i used ng-repeat to add multiple rows. But my table structure is different. I want to generate table structure like this:

  <table>
    <tr>
     <td >ID</td>
     <td>Sub</td>
    </tr>
    <tr>
     <td rowspan="3">1</td>
     <td>S1</td>
    </tr>
    <tr>
     <td>S2</td>
    </tr>
    <tr>
     <td>S3</td>
    </tr> 
  </table>

 --------------
  ID  | subjects 
 --------------
      | S1
      --------  
   1  | S2  
      --------
      | S3  
 --------------
      | S4 
      -------- 
   2  | S5  
      --------
      | S6
 --------------

    user:[
    {id:1 , 
     subjects:[
       {id:1 , name:"eng"} 
       {id:2 , name:"phy"}
      ]
     },
    { id:2 , 
     subjects:[
       {id:1 , name:"eng"} 
       {id:3 , name:"math"}
     ]
    }
   ]

my angular code is: 

      <tr ng-repeat = "user in users">
         <td>{{user.id}}</td>
         <td>{{user.subject}}</td>
      </tr>

I want to know how to generate table structure like above

Upvotes: 3

Views: 6402

Answers (5)

Donal
Donal

Reputation: 32713

You need to use ng-repeat-start and ng-repeat-end. For example:

var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope) {

    var users = [{
        id: 1,
        subjects: [{
            id: 1,
            name: "eng"
        }, {
            id: 2,
            name: "phy"
        }]
    }, {
        id: 2,
        subjects: [{
            id: 1,
            name: "eng"
        }, {
            id: 3,
            name: "math"
        }]
    }];

    $scope.users = users;
});
table { border-collapse: collapse; }
td { border: 1px solid Black; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="MyApp" ng-controller="MyController">
    <thead>
        <tr>
            <td>ID</td>
            <td>Subjects</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat-start="user in users">
            <td rowspan="{{user.subjects.length+1}}">{{user.id}}</td>                    
        </tr>
        <tr ng-repeat-end ng-repeat="subject in user.subjects">
            <td>S{{subject.id}}</td>
        </tr>
    </tbody>
</table>

Also, working fiddle here: http://jsfiddle.net/donal/r51d5fw5/17/

Upvotes: 2

Arulkumar
Arulkumar

Reputation: 13237

I split your JSON and push it into two $scope variable, like the below:

angular.forEach($scope.user, function(user) {
    $scope.userDetails.push({
      userId: user.id,
    });

    angular.forEach(user.subjects, function(subject) {
      $scope.subjectDetails.push({
        userId: user.id,
        subjectName: subject.name
      });
    });
});

In the HTML, I am using filter to filter by user's id.

<table>
  <thead>
    <tr>
      <th style="width: 50px">ID</th>
      <th style="width: 75px">Subjects</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in userDetails">
      <td><span ng-bind="user.userId"></span>
      </td>
      <td>
        <table>
          <tr ng-repeat="sub in subjectDetails | filter: {userId: user.userId}">
            <td>
              <div ng-bind="sub.subjectName"></div>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

This is also one of the way to achieve this.

Sample Plunker

Upvotes: 1

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

add users object in $scope.

$scope.users=[
    {id:1 , 
     subjects:[
       {id:1 , name:"eng"} 
       {id:2 , name:"phy"}
      ]
     },
    { id:2 , 
     subjects:[
       {id:1 , name:"eng"} 
       {id:3 , name:"math"}
     ]
    }
   ]

Here is the html.

 <table border="1">
  <tr>
    <th> ID   </th>
    <th>  subjects </th>
  </tr>
<tr ng-repeat="user in users">
     <td>{{user.id}}</td>
     <td><table>
       <tr ng-repeat="subject in user.subjects">
         <td>{{subject.name}}</td>
       </tr>
     </table></td>
  </tr>
  </table>

Here is the plunker

Upvotes: 0

Arial
Arial

Reputation: 5054

Here, I'm assuming that you want each user in users (in your JSON object) in one table, so you can do something as follows:

<table ng-repeat="user in users">
    <tr>
        <td>{{user.id}}</td>
        <td>Subjects</td>
    </tr>
    <tr ng-repeat="subject in user.subjects">
        <td>{{subject.id}}</td>
        <td>{{subject.name}}</td>
    </tr>
</table>

Adjust the html accordingly based on your needs, but this is the basic idea :)

Hope this helps!

Upvotes: 0

sfletche
sfletche

Reputation: 49704

Similar to the nested structure of your object, you can nest your ng-repeats like this...

<tr ng-repeat = "user in users">
    <td>{{user.id}}</td>
    <td ng-repeat="subject in user.subjects">{{subject.name}}</td>
</tr>

Upvotes: 1

Related Questions