Show message when ng-repeat is empty

[vinigarcia87]

Hi! How is the correct way of show an "no products found" message when ng-repeat is empty? I tried this:

          <md-table-container>
                <table md-table md-progress="vm.promise">
                    <thead md-head md-order="vm.query.order" md-on-reorder="...">
                    <tr md-row>
                        <th md-column md-order-by="name"><span>...</span></th>
                        <th md-column><span>...</span></th>
                    </tr>
                    </thead>
                    <tbody md-body>
                    <tr md-row ng-repeat="product in vm.products.data" ng-click="...">
                        <td md-cell>{{product.name}}</td>
                        <td md-cell>{{product.sku}}</td>
                    </tr>
                    <tr ng-show="!vm.products.data.length" colspan="2">
                        No products found
                    </tr>
                    </tbody>
                </table>
            </md-table-container>

But the message appears on the top of the table, not in the right place.

Can you help me? Thanks!

[ielektronick]

Hi @vinigarcia87 Here's a working example:

<tbody md-body>
    <tr class="md-row md-row-empty" ng-show="items.length === 0">
        <td class="md-cell" colspan="2">There's nothing to display.</td>
    </tr>
    <tr md-row ng-repeat="item in items">
         <!-- Content rows -->
    </tr>
</tbody>

For md-row-empty I made a text-align: center and that's it. :)