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(); }  }); 

Answer 1

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

Answer 2

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/