AngularJS grid no data message

Question

I was just wondering if this a way to display "No data available" instead of grid if json returned by the controller is empty? In the code below gridData stores the json returned by the controller

<div class="row">

    <table class="table table-striped table-hover ">
        <thead>
            <tr>
                <td><b>Format</b></td>
                <td><b>Day of Month</b></td>
                <td><b>Day of Week</b></td>
                <td></td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="i in gridData">
                <td>{{i.Id}}</td>
                <td>{{i.DayofMonth}}</td>
                <td>{{i.DayofWeek}}</td>
                <td><button class="btn btn-danger" ng-click="delete('{{i.Id}}')">Delete</button></td>
            </tr>
        </tbody>
    </table>
</div>

David says Reinstate Monica · Accepted Answer · 2015-04-27 19:43:39Z

2

You can use ng-switch

<div class="row">
  <div ng-switch="gridData">
    <div ng-switch-when="gridDataIsEmpty()">No data available</div>
    <div ng-switch-when="!gridDataisEmpty()"> <!-- Normal table Code --> </div>
  </div>
</div>

answered Apr 27, 2015 at 19:43

David says Reinstate Monica

20.2k22 gold badges84 silver badges124 bronze badges

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

Comments

freethinker · Accepted Answer · 2015-04-27 19:41:58Z

Try this:

<div class="row">

        <table class="table table-striped table-hover " ng-if="gridData.length > 0">
            <thead>
                <tr>
                    <td><b>Format</b></td>
                    <td><b>Day of Month</b></td>
                    <td><b>Day of Week</b></td>
                    <td></td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="i in gridData">
                    <td>{{i.Id}}</td>
                    <td>{{i.DayofMonth}}</td>
                    <td>{{i.DayofWeek}}</td>
                    <td><button class="btn btn-danger" ng-click="delete('{{i.Id}}')">Delete</button></td>
                </tr>
            </tbody>
        </table>

    <div ng-if="gridData.length === 0">No data available</div>
    </div>

Collectives™ on Stack Overflow

AngularJS grid no data message

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related