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

12,103

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>
Share:
12,103
Yeak
Author by

Yeak

Updated on July 24, 2022

Comments

  • Yeak
    Yeak almost 2 years

    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