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

Posted 2023-03-05

【中文标题】AngularJS - 过滤器空结果的占位符

【英文标题】：AngularJS - placeholder for empty result from filter

【发布时间】：2013-01-14 22:43:52

【问题描述】：

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

谢谢！

【问题讨论】：

groups.google.com/d/msg/angular/wR06cN5oVBQ/decEAdq3n30J

啊，是的，ng-show 的绝招很好。非常感谢

【参考方案1】：

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

【讨论】：

但是这种情况下过滤器执行了两次，有没有办法避免呢？

感谢您的解决方案。我一直在使用github.com/a8m/angular-filter 此处提供的 groupBy 过滤器，但不幸的是，上面接受的答案不起作用。此方法可能会执行两次过滤器，但无论如何都解决了问题。

在我的情况下，它可以在没有“== 0”的情况下工作。

【参考方案2】：

对只需要您指定一次过滤器的方法的调整：

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

Fiddle

【讨论】：

这是更好的解决方案，因为您只需要声明一次过滤器。 +1

问题是“这里什么都没有！”部分显示和隐藏非常快。当您通过 ajax 请求获取数据时，在显示返回的数据之前会有一段延迟，此时您可以看到“这里没有任何内容！”部分出现和消失。

@Temega - 你可以在 div 中添加一个“ng-hide”类

@Temega 你可以使用 ng-show="filteredBars.length === 0"

我使用 ng-controller="FooController as $ctrl" 并做了 "bar in $ctrl.filteredBars = (bars | filter:barFilter)" 所以我什至可以在外面使用 $ctrl.filteredBars.length ng重复。感谢这个史诗般的提示！

【参考方案3】：

取自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>

完整的sn-p：

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

【讨论】：

我怀疑自从第一次提出这个问题以来情况发生了变化，但鉴于目前这正是 Angular 的文档建议您解决问题的方式，我会说这是目前的正确方法。

我找不到另一个例子。这是“隐藏”的，在他们的动画文档中，我偶然在我需要它的同一天注意到它，或者我认为我不会记得。