CODEWITHSUNDEEP
angularjs
tesicg
tesicg

Reputation: 4053

How to display "No data" message using AngularJS?

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.

Upvotes: 5

Views: 17958

Answers (3)

user3559224
user3559224

Reputation:

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>

Upvotes: 18

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

try to put

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

    </td>
</tr>

Upvotes: 0

meriadec
meriadec

Reputation: 2983

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>

Upvotes: 0

Related Questions