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 <div> tags inside <tr>. — runTarm
– runTarm, Commented Aug 14, 2014 at 19:52
What @runTarm said, but are you also sure that history.orderedItems is not empty? — Explosion Pills
– Explosion Pills, Commented Aug 14, 2014 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
– Yeak, Commented Aug 14, 2014 at 20:35

Community · Accepted Answer · 2017-05-23 12:34:25Z

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, 2017 at 12:34

CommunityBot

11 silver badge

answered Aug 14, 2014 at 19:54

bhantol

9,6368 gold badges48 silver badges84 bronze badges

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

8 Comments

runTarm Over a year ago

I believe the tbody can be repeated.

bhantol Over a year ago

Does not seem like more are permitted w3.org/TR/html5/tabular-data.html#the-tbody-element

runTarm Over a year ago

Please see at the 4.9.1 The table element section, in "Content model:", followed by either zero or more tbody elements.

bhantol Over a year ago

@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 <tr> which is insertRow(). I am reading into the API pattern. Also since tHead is only one what does multiple tBody signify.

bhantol Over a year ago

@Yeak try this new solution. Original cause is no different than what runTarm said "Invalid HTML"

|

Rohit Parte · Accepted Answer · 2019-01-07 10:33:56Z

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'
  }
]

}

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related