CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
MB34
MB34

Reputation: 4404

AngularJS ng-repeat double rows

I am trying to add a second row (<tr>) in the code below for each event in events in the ng-repeat. However, it only adds a single row at the end, I need each new row (class="info") to be BETWEEN each of the other rows with the rel attribute.

The cell in the info row will be filled via ajax and toggled when the Details link is clicked, it will then be toggled again when the Close link is clicked (Details changes to Close). It will work similar to this fiddle: http://jsfiddle.net/Mrbaseball34/btwa7/

How would I do that in AngularJS?

<tbody id="events_tbody">
    <tr ng-repeat="event in events" rel="{{event.EVE_EVENT_CODE}}">
        <td>{{event.COURSE_TYPE}}</td>
        <td>{{event.EVE_FORMAL_DATE}}</td>
        <td>{{event.EVE_DESCRIPTION}}</td>
        <td>{{event.PRICE | dollars}}</td>
        <td class="nb">
            <a href="#">Details</a>
        </td>
    </tr>
    <!-- Now add Details row: -->
    <tr class="info" style="display:none;">
        <td colspan="5" id="info_{{event.EVE_EVENT_CODE}}"></td>
    </tr>
</tbody>

Upvotes: 4

Views: 3034

Answers (1)

Tim Brown
Tim Brown

Reputation: 3241

You need to make use of the special ng-repeat-start and ng-repeat-end attributes (explained here):

<tbody id="events_tbody">
    <tr ng-repeat-start="event in events" rel="{{event.EVE_EVENT_CODE}}">
        <td>{{event.COURSE_TYPE}}</td>
        <td>{{event.EVE_FORMAL_DATE}}</td>
        <td>{{event.EVE_DESCRIPTION}}</td>
        <td>{{event.PRICE | dollars}}</td>
        <td class="nb">
            <a href="#">Details</a>
        </td>
    </tr>
    <!-- Now add Details row: -->
    <tr ng-repeat-end class="info" style="display:none;">
        <td colspan="5" id="info_{{event.EVE_EVENT_CODE}}"></td>
    </tr>
</tbody>

Upvotes: 11

Related Questions