AngularJS - espace réservé pour le résultat vide du filtre

Question

Je souhaite avoir un espace réservé, par exemple <No result> lorsque le résultat du filtre est renvoyé vide. Quelqu'un pourrait-il s'il vous plaît aider? Je ne sais même pas par où commencer...

HTML :

 <div ng-controller="Ctrl">
<h1>My Foo</h1>
<ul>
    <li ng-repeat="foo in foos">
        <a href="#" ng-click="setBarFilter(foo.name)">{{foo.name}}</a>
    </li>
</ul>
<br />
<h1>My Bar</h1>
<ul>
    <li ng-repeat="bar in bars | filter:barFilter">{{bar.name}}</li>
</ul>

</div>
 

JS :

 function Ctrl($scope) {

  $scope.foos = [{
    name: 'Foo 1'
  },{
    name: 'Foo 2'
  },{
    name: 'Foo 3'
  }];

  $scope.bars = [{
    name: 'Bar 1',
    foo: 'Foo 1'
  },{
    name: 'Bar 2',
    foo: 'Foo 2'
  }];

  $scope.setBarFilter = function(foo_name) {
    $scope.barFilter = {};
    $scope.barFilter.foo = foo_name;
  }
}
 

jsFiddle : http://jsfiddle.net/adrn/PEumV/1/

Merci!

Answer 1

Un tweak sur l'approche qui vous oblige seulement à spécifier le filtre une fois:

   <li ng-repeat="bar in filteredBars = (bars | filter:barFilter)">{{bar.name}}</li>
</ul>
<p ng-hide="filteredBars.length">Nothing here!</p>
 

Violon

Answer 2

Voici l'astuce en utilisant ng-show

HTML:

 <div ng-controller="Ctrl">
<h1>My Foo</h1>
<ul>
    <li ng-repeat="foo in foos">
        <a href="#" ng-click="setBarFilter(foo.name)">{{foo.name}}</a>
    </li>
</ul>
<br />
<h1>My Bar</h1>
<ul>
    <li ng-repeat="bar in bars | filter:barFilter">{{bar.name}}</li>
</ul>
<p ng-show="(bars | filter:barFilter).length == 0">Nothing here!</p>

</div>
 

jsFiddle: http://jsfiddle.net/adrn/PEumV/2/