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?

<

Answer 1

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

Answer 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>

Answer 3

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>

Answer 4

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>

Answer 5

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/

Answer 6

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>`