AngularJS – 来自filter的空结果的占位符

我想要一个占位符，例如<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/

谢谢！

Answer 1

调整方法只需要您指定一次filter：

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

小提琴

Answer 2

这是使用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/

Answer 3

从这个官方文件中看到他们是这样做的：

 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>