CODEWITHSUNDEEP
javascripthtmlangularjshtml-tableangularjs-ng-repeat
m0ngr31
m0ngr31

Reputation: 830

Adding table row underneath each table row generated by ngRepeat

I'm using ng-repeat to populate a table with data. This is how I have it setup:

<tbody>
    <tr ng-repeat="client in clients | filter:x | filter:y |orderBy:predicate:!reverse | itemsPerPage: pageSize">
        <td><input id="option-{{client.id}}" type="checkbox" value=""></td>
        <td><a href="#/client/{{client.id}}">{{client.lastname}}</a></td>
        <td><a href="#/client/{{client.id}}">{{client.firstname}}</a></td>
        <td>{{client.status}}</td>
        <td>{{client.phone}}</td>
        <td><a href="mailto:{{client.email}}">{{client.email}}</a></td>
    </tr>
</tbody>

But I'm needing it to add a table row underneath the row it creates in the ng-repeat. Is that possible?

Upvotes: 0

Views: 90

Answers (2)

akn
akn

Reputation: 3722

You can create a directive:

app.directive('addRow', function ($parse, $compile) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            var template = attrs.addRow ? $parse(attrs.addRow)(scope) : '<tr><td>-</td></tr>';
            elem.after(template);
            $compile(elem.contents());
        }
    }
});

It adds passed row template after each element. If template is not passed it uses default template. It also compiles your template, so you can use all angular's stuff inside (eg. <td>{{variable}}</td>).

Example use:

<table>
    <tbody>
        <tr ng-repeat="item in [1,2,3,4]" add-row="'<tr><td>my template</td></tr>'">
            <td>{{item}}</td>
        </tr>
    </tbody>
</table>

Here is jsfiddle: http://jsfiddle.net/aartek/52b6e/

Upvotes: 1

zszep
zszep

Reputation: 4458

You can allways add a row manually to the table like:

<tbody>
    <tr ng-repeat="client in clients | filter:x | filter:y |orderBy:predicate:!reverse | itemsPerPage: pageSize">
        <td><input id="option-{{client.id}}" type="checkbox" value=""></td>
        <td><a href="#/client/{{client.id}}">{{client.lastname}}</a></td>
        <td><a href="#/client/{{client.id}}">{{client.firstname}}</a></td>
        <td>{{client.status}}</td>
        <td>{{client.phone}}</td>
        <td><a href="mailto:{{client.email}}">{{client.email}}</a></td>
    </tr>
    <tr>
       <td>Footer 1</>
       <td>Footer 2</>
       <td>Footer 3</>
       <td>Footer 4</>
       <td>Footer 5</>
       <td>Footer 6</>
    </tr>
</tbody>

Even better include it in a tfoot tag.

Or if you need two rows, you can do this:

<tbody ng-repeat="item in items">
    <tr>
        <td>{{item.row_one_stuff}}</td>
        <td>{{item.more_row_one_stuff}}</td>
    </tr>
    <tr>
        <td>{{item.row_two_stuff}}</td>
        <td>{{item.more_row_two_stuff}}</td>
    </tr>
</tbody>

Upvotes: 1

Related Questions