AngularJS -来自过滤器的空结果的占位符
AngularJS -来自过滤器的空结果的占位符
提问于 2013-01-31 06:59:43
我想要一个占位符，例如当过滤器结果返回空时为<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：http://jsfiddle.net/adrn/PEumV/1/
谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-02-02 07:12:24
对该方法进行了调整，只需要指定一次过滤器：
<li ng-repeat="bar in filteredBars = (bars | filter:barFilter)">{{bar.name}}</li>
</ul>
<p ng-hide="filteredBars.length">Nothing here!</p>Stack Overflow用户
发布于 2013-01-31 08:22:26
下面是使用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/
Stack Overflow用户
发布于 2016-07-07 10:55:09
摘自this官方文档，这就是他们是如何做到的：
ng-repeat="friend in friends | filter:q as results"然后将结果作为数组使用
<li class="animate-repeat" ng-if="results.length == 0">
<strong>No results found...</strong>
</li>完整代码段：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14615495
复制相关文章
相似问题