Angular js: How to use 'loop inside loop' in html tables

Question

I have a json structure like

studentList = [
        {
            'name': 'name',
            'isNew': True,
            'class': 'class',
            'subjects': [
                {
                'name': 'subname',
                'mark': 70
                }, {
                'name': 'subname2',
                'mark': 80
                },
            ]
        },
        .....
    ]

I am trying to put this data inside an html table. The below code is not working for me.

<table>
 .....

<tbody>
    <div ng-repeat="student in student_list">
        <tr ng-class='{in:$first}'> New Student </tr>
        <div ng-if="student.isNew">
            <tr>
                <td> {{student.name}} </td>
                <td> {{student.class}} </td>
                <div ng-repeat="(key, subject) in student.subjects>
                    <td> {{subject.name}} </td>
                    <td> {{subject.mark}} </td>
                </div>
            </tr>
        </div>

        // Old student
        <tr ng-class='{in:$first}' > Old Student </tr>
        ....

    </div>
</tbody>

If I didn't use <div>, I can loop through the table. But for the above table structure, how can I represent data using angular.

your code structure is wrong, you can not write td inside div !! do you want 4 columns ?? — Anil Kumar Ram
– Anil Kumar Ram, Commented Nov 4, 2016 at 13:09

devqon · Accepted Answer · 2016-11-04 12:53:44Z

1

A div element is not valid for a direct child of the tbody element. Just add the ng-repeat to the tr element.

If you need to repeat over 2 tr elements at once, you can use the ng-repeat-start directive:

<tr ng-repeat-start="student in student_list">
    <!-- .. -->
</tr>
<tr ng-repeat-end>
    <!-- you still have the student object available here -->
</tr>

answered Nov 4, 2016 at 12:53

devqon

14k2 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tom Johnson · Accepted Answer · 2016-11-04 13:13:39Z

0

You could use the built in angular directive "filter". So on your ng-repeat you can have.

New students

<tr ng-repeat="student in studentList | filter : isNew">
<td>{{stuffgoeshere}}</td>
</tr>

Old students

<tr ng-repeat="student in studentList | filter !isNew">
<td>{{stuffgoeshere}}</td>
<tr>

Hope it helps!

answered Nov 4, 2016 at 13:13

Tom Johnson

7015 silver badges16 bronze badges

Comments

Sreekanth · Accepted Answer · 2016-11-04 13:16:08Z

There are multiple issues with your markup that are messing up your output. You could do something like this. Unlike other html tags, table, tr,td, tbody tags are tightly grouped, you cannot have divs as child tags inside any of them.

Though it may seem work sometimes, but it is not something you should do. Always try to follow the nesting as table => tbody => tr => td => any tag.

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope",
  function($scope) {

    $scope.pro = [{
      product: "chicken",
      rating: 3
    }, {
      product: "fish",
      rating: 3
    }, {
      product: "pizza",
      rating: 4
    }];

    $scope.studentsList = [{
      'name': 'StudentName',
      'isNew': true,
      'class': 'class',
      'subjects': [{
        'name': 'subname',
        'mark': 70
      }, {
        'name': 'subname2',
        'mark': 80
      }, ]
    }, {
      'name': 'StudentNameOld',
      'isNew': false,
      'class': 'class',
      'subjects': [{
        'name': 'subname',
        'mark': 70
      }, {
        'name': 'subname2',
        'mark': 80
      }, ]
    }];

  }
]);

td {
  border: 1px solid black;
}
.header > td {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <table>
      <tbody ng-repeat="student in studentsList">
        <tr ng-if="student.isNew" class="header">
          <td colspan="2">New Student</td>
        </tr>
        <tr ng-if="!student.isNew" class="header">
          <td colspan="2">Old Student</td>
        </tr>
        <tr ng-repeat="course in student.subjects">
          <td>{{course.name}}
          </td>
          <td>
            {{course.mark}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Collectives™ on Stack Overflow

Angular js: How to use 'loop inside loop' in html tables

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related