How to display "No data" message using AngularJS?

Question

The code looks as following:

<table>
    <tr ng-repeat="action in actionList">
        <td></td>
        ...
    </tr>
    <tr ng-show="!actionList.length">
        <td>
            No data.                
        </td>
    </tr>
</table>

This works, but not in way I want because it initially displays "No data" message. I need to display nothing initially and the table with data if actionList.length is not 0. If actionList.length is 0 then display "No data" message, but not as a part of table.

Update:

I've added in my controler:

$scope.isButtonClicked = false;

$scope.queryResult = function () {
    $scope.isButtonClicked = true;
    $scope.actionList = [];
    $scope.actionsQuery.resetPage();
    appendPage();
};

But, "No data." message appears on every click. When there's some data it appears very shortly and disappears and when there's no data, it appears correctly.

You need to maintain an loading indicator.

zs2020
– zs2020

2014-09-24 09:00:53 +00:00
Commented Sep 24, 2014 at 9:00 — zs2020
– zs2020, Commented Sep 24, 2014 at 9:00
What is loading indicator?

tesicg
– tesicg

2014-09-24 09:48:22 +00:00
Commented Sep 24, 2014 at 9:48 — tesicg
– tesicg, Commented Sep 24, 2014 at 9:48

score 18 · Accepted Answer · 2014-09-24 09:50:34Z

18

Why you confusing? Lot of way of you can think to solve this.

Try this simple way

<table>
    <tr ng-show="actionList.length!=0" ng-repeat="action in actionList">
        <td></td>
        ...
    </tr>
    <tr >
        <td ng-show="actionList.length==0">
            No data.                
        </td>
    </tr>
</table>

Update 1:-

Also you need to check actionList is undefined or null
And You should $scope.actionList is a array
You can check the actionList is null or undefined with ng-if Statement (try with ng-if instead of ng-show in the div tag)

Something like this below way

<div ng-show="actionList !='null' && actionList !='undefined'">
 <table>
        <tr ng-show="actionList.length!=0" ng-repeat="action in actionList">
            <td></td>
            ...
        </tr>
        <tr >
            <td ng-show="actionList.length==0">
                No data.                
            </td>
        </tr>
    </table>
</div>
<div ng-show="actionList =='null'|| actionList =='undefined'">
 No data. 
</div>

Update 2 :-

Another simple way to instead of my update 1

try this below code.

<table>
    <tr ng-show="actionList!='undefined' && actionList!='null' && actionList.length!=0"  ng-repeat="action in actionList">
        <td></td>
        ...
    </tr>
    <tr >
    <td ng-show="actionList=='undefined' ||actionList=='null' || actionList.length==0 ">
            No data.                
        </td>
    </tr>
</table>

Here you can try with ng-if instead of ng-show

Update 3:

I want because it initially displays "No data" message. I need to display nothing initially and the table with data if actionList.length is not 0. If actionList.length is 0 then display "No data" message, but not as a part of table.

So Simple ...

Create a new Boolean Scope variable like a named as IsButtonClick
Globally declare $scope.IsButtonClick==false
Set $scope.IsButtonClick==true on your button click event

Then copy past this below code instead of your html code.

<div ng-show="IsButtonClick">
    <table>
            <tr ng-show="actionList!='undefined' && actionList!='null' && actionList.length!=0"  ng-repeat="action in actionList">
                <td></td>
                ...
            </tr>           
        </table>
</div>
<div ng-show="IsButtonClick"> <span ng-show="actionList=='undefined' ||actionList=='null' || actionList.length==0 "> No data.</span>  </div>

Update 4 :

But, "No data." message appears on every click. When there's some data it appears very shortly and disappears and when there's no data, it appears correctly

try this way

$scope.queryResult = function () { 
        $scope.isButtonClicked = false;      
        $scope.actionList = [];
        $scope.actionsQuery.resetPage();
        appendPage();
        if($scope.actionList.Length==0)
        {
          $scope.isButtonClicked = true;
        }
    };

and the html is

<div ng-show="IsButtonClick">
        <table>
                <tr ng-show="actionList!='undefined' && actionList!='null' && actionList.length!=0"  ng-repeat="action in actionList">
                    <td></td>
                    ...
                </tr>           
            </table>
    </div>
    <div ng-show="IsButtonClick"> <span ng-hide="actionList !='undefined' || actionList!='null' || actionList.length!=0 "> No data.</span>  </div>

edited Sep 24, 2014 at 9:50

answered Sep 24, 2014 at 8:15

user3559224

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

7 Comments

tesicg Over a year ago

The issue is the table is populating with data when you on click on button on the same page. When you doesn't click button, "No data" will be visible initially, which is not needed.

user3559224 Over a year ago

So What? You need to assign the values to $scope.actionList on the button click event. Can you explain properly for what you want ?\

tesicg Over a year ago

When I click search button, there will be some results or not. If results exist they are shown in the table, if not the message "No data." is shown. But, the message should be out of table.

user3559224 Over a year ago

Please see my Update 3

user3559224 Over a year ago

@tesicg Dude, It's does make sense?

|

meriadec · Accepted Answer · 2014-09-24 08:05:36Z

0

Try this :

<div ng-switch="!!actionsList.length">

  <div ng-switch-when="true">
    <table>
      <tr ng-repeat="...">
        <td> ... </td>
      </tr>
    </table>
  </div>

  <div ng-switch-when="false">
    No data
  </div>

</div>

edited Sep 24, 2014 at 8:05

answered Sep 24, 2014 at 7:53

meriadec

2,98321 silver badges20 bronze badges

4 Comments

tesicg Over a year ago

It doesn't display any data.

meriadec Over a year ago

ok edited my answer, to be sure having a boolean. can you retry it ?

tesicg Over a year ago

It returns data now, but when there's no data there's no "No data" message.

meriadec Over a year ago

It means $scope.actionsList have a length... Can you console.log() it ? Maybe initialize it as [] at the top of your controller ?

Kalhan · Accepted Answer · 2014-09-24 08:14:13Z

0

try to put

<tr ng-show="!actionList.length">
    <td ng-bind="noData">

    </td>
</tr>

edited Sep 24, 2014 at 8:14

answered Sep 24, 2014 at 7:49

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

3 Comments

tesicg Over a year ago

It's not working because the style says to display nothing (none).

meriadec Over a year ago

ngBing expect to get an expression. "No data" is not an expression...

Kalhan Over a year ago

oh sorry silly mistake. u can use a $scope.noData variable to check the length property in the controller after getting the data

Collectives™ on Stack Overflow

How to display "No data" message using AngularJS?

3 Answers 3

Update 1:-

Update 2 :-

Update 3:

Update 4 :

7 Comments

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update 1:-

Update 2 :-

Update 3:

Update 4 :

7 Comments

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related