Table with details in AngularJS

Question

I've got tabular data loaded in AngularJS app. I want to display them in a table. But I also want to have detail view for some rows. Something like:

<table>
    <tr ng-repeat="datum in data">
        <!-- if datum.showDetail => detail view -->

            <td colspan="N">
                <h1>{{ datum.field1 }} <small>{{ datum.field2 }}</small></h1>
                ...
                <p>{{ datum.fieldN }}</p>
            </td>

        <!-- else => row view -->

            <td>{{ datum.field1 }}</td>
            <td>{{ datum.field2 }}</td>
            ...
            <td>{{ datum.fieldN }}</td>
    </tr>
</table>

What's the Angular way of doing this?

Felipe Castro · Accepted Answer · 2013-02-28 01:09:44Z

1

Why not just adding ng-show and ng-hide directives to the td's?

<table>
    <tr ng-repeat="datum in data" >
        <!-- if datum.showDetail => detail view -->

            <td colspan="N" ng-show="datum.showDetail">
                <h1>{{ datum.field1 }} <small>{{ datum.field2 }}</small></h1>
                ...
                <p>{{ datum.fieldN }}</p>
            </td>

        <!-- else => row view -->

            <td ng-hide="datum.showDetail">{{ datum.field1 }}</td>
            <td ng-hide="datum.showDetail">{{ datum.field2 }}</td>
            ...
            <td ng-hide="datum.showDetail">{{ datum.fieldN }}</td>
    </tr>
</table>

Also note that, in case you're using the Angular UI extensions, the ui-if directive would probably be a better fit, since it would actually remove the unused td's from the table, instead of just hiding them, like ng-hide.

answered Feb 28, 2013 at 1:09

Felipe Castro

1,61311 silver badges10 bronze badges

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

2 Comments

Jakub Kulhan Over a year ago

Thanks for pointing out ui-if directive. That is exactly what I need.

Graham P Heath Over a year ago

as of Angular 1.1.4 ui-if is now included in the core as ng-if

Collectives™ on Stack Overflow

Table with details in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related