AngularJS - 占位符从过滤器空的结果 [英] AngularJS - placeholder for empty result from filter

问题描述

我想有一个占位符，例如＆LT;没有结果＆gt;在过滤后的结果返回空。谁能请帮助？我甚至不知道从哪里开始...

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...

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/

谢谢！

推荐答案

在方法的一个好办法，只需要你指定一次过滤器：

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>

小提琴

这篇关于AngularJS - 占位符从过滤器空的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！