angular ng-repeat inside of ng-repeat not working in table

Question

I have the following

 <tbody ng-repeat="history in orderHistory">
        <tr>
            <td>{{history.reference_code}}</td>
            <div ng-repeat="items in history.orderedItems">
                <td>{{items.product_description}}</td>
                <td>{{items.quantity}}</td>
            </div>
            <td>
        </tr>
</tbody>

it seems that the second ng-repeat is not working and {{items.quantity}} or items . anything does not end up showing.

any ideas?

When i just test it out like so it works

<div ng-repeat="history in orderHistory">
  <div ng-repeat="items in history.orderedItems">
    {{items.product_description}}
  </div>
</div>

but i really need it inside the table

I tried the following:

    <tbody>
        <tr ng-repeat="history in orderHistory">
            <td>{{history.reference_code}}</td>
            <div ng-repeat="items in history.orderedItems">
                <td>{{items.product_description}}</td>
                <td>{{items.quantity}}</td>
            </div>
            <td>
        </tr>
     </tbody>

and still does not work

The table structure is invalid. There is `
` tags inside ``. — runTarm, Aug 14 '14 at 19:52
What @runTarm said, but are you also sure that `history.orderedItems` is not empty? — Explosion Pills, Aug 14 '14 at 19:53
Yes for sure history.orderedItems is not empty because of my second statment works when i try it with just divs and no table — Yeak, Aug 14 '14 at 20:35

score 5 · Accepted Answer · edited May 23 '17 at 12:34

5

UPDATED Answer

http://plnkr.co/edit/x0ZxWSy6JN3fo961NbQX?p=preview

The following should get you going.

  <table ng-controller="myCtrl">

    <tbody>
      <tr ng-repeat="history in orderHistory">
        <td>{{history.reference_code}}</td>

        <td ng-repeat-start="items in history.orderedItems">
          {{items.product_description}}<//td>

        <td ng-repeat-end>{{items.quantity}}</td>

      </tr>
    </tbody>
  </table>

OLD ANSWER ----- Kept previous answer is kept for historical reasons due to comments. The problem is tbody - not supposed to be repeated. I had a similar problem with <p> just like what you see in here.

Here is a fiddle http://jsfiddle.net/yogeshgadge/02y1jjau/1/ where it works - tbody changed to div.

Here is one demo where tbody does NOT work http://jsfiddle.net/yogeshgadge/2tk3u7hq/4/

Nested ng-repeat

Try this - moved the ng-repeat on <tr>

<tbody>
        <tr ng-repeat="history in orderHistory">
            <td>{{history.reference_code}}</td>
            <div ng-repeat="items in history.orderedItems">
                <td>{{items.product_description}}</td>
                <td>{{items.quantity}}</td>
            </div>
            <td>
        </tr>
</tbody>

edited May 23 '17 at 12:34

Community

1
1

answered Aug 14 '14 at 19:54

bhantol

9,368
7
44
81

1

I believe the `tbody` can be repeated. – runTarm Aug 14 '14 at 19:56
Does not seem like more are permitted http://www.w3.org/TR/html5/tabular-data.html#the-tbody-element – bhantol Aug 14 '14 at 20:03
Please see at the `4.9.1 The table element` section, in "Content model:", `followed by either zero or more tbody elements`. – runTarm Aug 14 '14 at 20:11
@runTram You are correct indeed about the text in 4.9.1. However it does not make sense because the API is for creating one tbody element - using HTMLElement createTBody(); unlike which is insertRow(). I am reading into the API pattern. Also since tHead is only one what does multiple tBody signify. – bhantol Aug 14 '14 at 20:18
If it make you think like that, may be it is a bad API design. BTW, even if the multiple tbody is not allowed by the spec, most browsers seems to support it. So, it surely is not the root cause of the problem that OP has encountered. – runTarm Aug 14 '14 at 20:24
I agree it is not a root cause.
will also not work.
– bhantol Aug 14 '14 at 20:31
1

@Yeak try this new solution. Original cause is no different than what runTarm said "Invalid HTML" – bhantol Aug 14 '14 at 21:03
I get the following : Unterminated attribute, found 'ng-repeat-start' but no matching 'ng-repeat-end' found. even though ng-repeat-end is present just as you wrote – Yeak Aug 14 '14 at 22:39

Rohit Parte · Answer 2 · 2019-01-07T10:33:56.487

This could work properly.

<table>
<thead>
   <tr>
      <th></th>
      <th>Claim Id</th>
      <th>Job Number</th>
      <th>Project</th>
      <th>Created On</th>
      <th>Error</th>
   </tr>
</thead>
<tbody>
   <tr ng-repeat="jobData in createJobResponseData.data">
      <td class="counterCell"></td>
      <td>{{jobData.claimId}}</td>
      <td>{{jobData.jobNumber}}</td>
      <td>{{jobData.project}}</td>
      <td>{{jobData.createdOn}}</td>
      <td >
         <div class="counterCellDiv" ng-repeat="error in jobData.errorList">
            {{error.errorMessage}}
         </div>
      </td>
   </tr>
</tbody>


   $scope.createJobResponseData = {
'status': '200',
'message': 'Request processed successfully',
'data': [
  {
    'claimId': 'data1',
    'claimLineId': '1',
    'errorList': null,
    'insertedIntoDb': true,
    'jobNumber': 'nn001',
    'project': 'pro0',
    'repairStatus': '5'
  },
  {
    'claimId': 'ASD',
    'claimLineId': '1',
    'errorList': [{
      'errorCode': ')01',
      'errorMessage': 'accidentDescription cannot be blank'
    }, {
      'errorCode': '(01)',
      'errorMessage': 'abcd cannot be blank'
    }],
    'insertedIntoDb': true,
    'jobNumber': '',
    'project': 'asd',
    'repairStatus': '5'
  },
  {
    'claimId': 'oiqweo',
    'claimLineId': '1',
    'errorList': null,
    'insertedIntoDb': true,
    'jobNumber': 'qoweiu',
    'project': 'asq',
    'repairStatus': '5'
  },
  {
    'claimId': 'SDDDASD',
    'claimLineId': '1',
    'errorList': null,
    'insertedIntoDb': true,
    'jobNumber': 'asdqio',
    'project': 'kalsdjjk',
    'repairStatus': '5'
  }
]

}

angular ng-repeat inside of ng-repeat not working in table

2 Answers2