AngularJS-过滤器中空结果的占位符

我希望有一个占位符，例如，当过滤器结果返回空时，<No result>。有人能帮帮忙吗？我都不知道从何说起。

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 : < a href = “ http://jsFiddle.net/adrn/PEumV/1/”> http://jsFiddle.net/adrn/peumv/1/

谢谢！

57291 次浏览
小开

Here is the trick using 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/

小开
最佳答案

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

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

Fiddle

小开

Taken from this official document that's how they do it:

ng-repeat="friend in friends | filter:q as results"

Then use the results as an array

<li class="animate-repeat" ng-if="results.length == 0">
<strong>No results found...</strong>
</li>

Full snippet:

<div ng-controller="repeatController">
I have \{\{friends.length}} friends. They are:
<input type="search" ng-model="q" placeholder="filter friends..." aria-label="filter friends" />




<ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
[\{\{$index + 1}}] \{\{friend.name}} who is \{\{friend.age}} years old.
</li>
<li class="animate-repeat" ng-if="results.length == 0">
<strong>No results found...</strong>
</li>
</ul>
</div>

提交答案