Javascript AngularJS - 过滤器空结果的占位符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14615495/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS - placeholder for empty result from filter
提问by Adrian Gunawan
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...
我想要一个占位符，例如<No result>当过滤器结果返回空时。有人可以帮忙吗？我什至不知道从哪里开始......
HTML:
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:
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/
jsFiddle：http: //jsfiddle.net/adrn/PEumV/1/
Thanks!
谢谢！
回答by Mark Rajcok
回答by Adrian Gunawan
Here is the trick using ng-show
这是使用 ng-show 的技巧
HTML:
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/
jsFiddle：http : //jsfiddle.net/adrn/PEumV/2/
回答by caiocpricci2
Taken from thisofficial 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>
