Adrian Gunawan Adrian Gunawan - 1 year ago 108
AngularJS Question

AngularJS - placeholder for empty result from filter

I want to have a place holder, e.g.

<No result>
when filter result returns empty. Could anyone please help? I don't even know where to start...


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



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 = {};
$ = foo_name;



Answer Source

A tweak on the approach that only requires you to specify the filter once:

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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download