Angular js - Show message if ng-repeat is empty

Question

The following AngularJS application is working with ng-repeat and an applied filter. A certain applied filter leaves no values left. How can I display a notification?

js fiddle

HTML

<div >
<div data-ng-controller="myCtrl">


    <ul >
        <li data-ng-repeat="item in values | filter:filterIds()"> 
            <code>#{{item.id}}</code> Item
        </li>
    </ul>

    <p ng-show="!values.length">no vals with this filter</p>
    <button ng-click="loadNewFilter()"> filter now</button>
</div>


</div>

AngularJS

var app = angular.module('m', []);

app.controller('myCtrl', function ($scope) {
$scope.values = [{
    id: 1
}, ....
}];

$scope.filter = [1,2,3,4,5,6];

$scope.filterIds = function (ids) {
        return function (item) {
            var filter = $scope.filter;

                 return filter.indexOf(item.id) !== -1;         
        }
 }

$scope.loadNewFilter = function (){
    $scope.filter = [-1];
    $scope.$apply();
}

});

Rajamohan Anguchamy · Accepted Answer · 2016-06-08 05:16:59Z

40

I think this is what you want:

var app = angular.module('myApp', []);    
app.controller('myCtrl', function ($scope) {
  $scope.values = [
    {id: 1}, 
    {id: 2}, 
    {id: 3}, 
    {id: 4}, 
    {id: 5}, 
    {id: 6}];
    
  $scope.filter = [1,2,3,4,5,6];
        
  $scope.filterIds = function (ids) {
    return function (item) {
      var filter = $scope.filter; 
      return filter.indexOf(item.id) !== -1;       	
    }
  }
        
  $scope.loadNewFilter = function (){
    $scope.filter = [1,5];    
  }                 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div data-ng-controller="myCtrl">               
    <ul>
      <li data-ng-repeat="item in testValue=(values | filter:filterIds())"> 
        <code>#{{item.id}}</code> Item
      </li>
    </ul>           
    <p ng-show="!testValue.length">no vals with this filter</p>
    <button ng-click="loadNewFilter()"> filter now</button>
  </div>
</div>

FIDDLE LINK

This is Another one FIDDLE LINK check this also

edited Jun 8, 2016 at 5:16

answered Sep 16, 2014 at 10:25

Rajamohan Anguchamy

1,7461 gold badge17 silver badges35 bronze badges

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

2 Comments

Dmitri Algazin Over a year ago

I would update that code, to show two messages, one if no 'values' initially exist <p ng-show="!values.length">no values exist</p>, another if values exist, but all are filtered out <p ng-show="values.length && !testValue.length">no vals with this filter</p>

Rajamohan Anguchamy Over a year ago

@DmitriAlgazin Check this Updated FIDDLE LINK jsfiddle.net/RajamohanShilpa/z9daLbLm/13

dfsq · Accepted Answer · 2014-09-16 10:25:18Z

29

I would go with very simple CSS approach:

HTML:

<ul>
    <li data-ng-repeat="item in values | filter:filterIds()"> <code>#{{item.id}}</code> Item</li>
    <li class="no-items">There are no matching items.</li>
</ul>

CSS:

li + .no-items {
    display: none;
}

So basically li.no-items is only visible if there are no other LI's and hidden otherwise. I think this is better for performance than introducing one more watcher with ngShow/ngHide.

Demo: http://jsfiddle.net/z9daLbLm/5/

answered Sep 16, 2014 at 10:25

dfsq

193k26 gold badges244 silver badges261 bronze badges

2 Comments

Ouadie Over a year ago

You can add .loading{display:none} to prevent showing the message while loading

ericjam Over a year ago

I like this best if there are multiple filters being done, its a true look at the DOM state without actually needing to investigate with overhead.

Vamsi · Accepted Answer · 2014-09-16 10:29:42Z

8

Here's working example: http://jsfiddle.net/z9daLbLm/2/

You can save the result of the filter in ng-repeat

<div ng-repeat="item in filteredValues = (values | filter:filterIds())">{{item}}</div>

The result is stored in filteredValues Then use this filtered values in the DOM

<div ng-show="!filteredValues.length">No Items</div>

edited Sep 16, 2014 at 10:29

answered Sep 16, 2014 at 10:23

Vamsi

9,8006 gold badges40 silver badges46 bronze badges

Comments

sylwester · Accepted Answer · 2014-09-16 10:23:06Z

2

Please see here http://jsfiddle.net/ntofav3c/

change this:

<p ng-show="!values.length">no vals with this filter</p>

to:

 <p ng-hide="values | filter:filterIds()">no vals with this filter</p>

answered Sep 16, 2014 at 10:23

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

1 Comment

ericjam Over a year ago

I like this approach the best as its much more meaningful in the Angular sense but unfortunately gets cluttered when you have multiple filters upon the ng-repeat list.

Community · Accepted Answer · 2017-05-23 11:46:52Z

2

See this working jsfiddle: http://jsfiddle.net/z9daLbLm/4/ I added this code before your <ul> list

<div ng-if="(values|filter:filterIds()).length == 0">
    List is empty
</div>

It just shows "List is empty" text when your filtered values length is zero.

For more information refer to this link: How to display length of filtered ng-repeat data

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Sep 16, 2014 at 10:26

Glogo

2,8942 gold badges27 silver badges25 bronze badges

Comments

Sijan Gurung · Accepted Answer · 2016-02-07 21:02:27Z

I recently faced the same kind of problems.. I had three filters and one orderBy in the ng-repeat and wanted to show some emptyList Messages....
The above solutions didnot work..so I made one out of my own.

Made the emptymsg as background div and the mainContainer as top div..

The emptyMsg div will always be shown, so whenever there is no value in list.. the emptyMsg will be the only div showing. PS: the code snippet wont run..because the additional libraries are not added.. This is just to give you an idea!

//empty msg....
.emptyMsg{
    position: absolute;
    left: 0;right: 0;
    margin: auto;
    color: gray;
    text-align: center;
    font-size:3.0em;
    z-index: 0;
}
.activityItem {
    margin: 0px !important;
    padding: 0px !important;
    border: 0px !important;
}
.mainContainer {
    z-index: 999;
    width: 100%;
    height: 40px;
    left: 0px;
    margin-top: 10px;
    display: inline-block;
}

<h4>List of Activities</h4>
        <ion-list>
           <div class="emptyMsg">No Activities found!</div>
            <div class="item activityItem" ng-repeat="activity in activities | orderBy:field1Order:order.reverse1 | filter:importanceFilter | filter:motiveFilter track by $index">
                   <div class="mainContainer">

                            <div class="divBar">{{activity.energy}}%</div>
                   
                </div>
            </div>
            
        </ion-list>

Aman Kumar · Accepted Answer · 2016-04-18 11:40:26Z

0

You can use ng-switch to do this.

For example:

`    <div ng-app ng-controller="friendsCtrl">
    <label>Search: </label><input ng-model="searchText" type="text">
    <div ng-init="filtered = (friends | filter:searchText)">
    <h3>'Found '{{(friends | filter:searchText).length}} friends</h3>
    <div ng-switch="(friends | filter:searchText).length">
      <span class="ng-empty" ng-switch-when="0">No friends</span>
      <table ng-switch-default>
        <thead>
          <tr>
            <th>Name</th>
            <th>Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="friend in friends | filter:searchText">
            <td>{{friend.name}}</td>
            <td>{{friend.phone}}</td>
          </tr>
        </tbody>
      </table>
     </div>`

edited Apr 18, 2016 at 11:40

Aman Kumar

4,5573 gold badges21 silver badges40 bronze badges

answered Oct 9, 2015 at 13:27

LukitaBrands

213 bronze badges

Collectives™ on Stack Overflow

Angular js - Show message if ng-repeat is empty

7 Answers 7

2 Comments

Demo: http://jsfiddle.net/z9daLbLm/5/

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Demo: http://jsfiddle.net/z9daLbLm/5/

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related