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

IT技术 javascript html angularjs
2021-02-24 16:48:20

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

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

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

小提琴

我使用 ng-controller="FooController as $ctrl" 并做了“bar in $ctrl.filteredBars = (bars | filter:barFilter)”所以我什至可以在 ng-repeat 之外使用 $ctrl.filteredBars.length。感谢这个史诗般的提示！
2021-04-20 16:48:20
@Temega 你可以使用 ng-show="filteredBars.length === 0"
2021-05-04 16:48:20
这是更好的解决方案，因为您只需要声明一次过滤器。+1
2021-05-14 16:48:20
@Temega - 您可以向 div 添加一个“ng-hide”类
2021-05-15 16:48:20
问题是“这里什么都没有！” 部分显示和隐藏非常快。当您通过 ajax 请求获取数据时，在显示返回的数据之前会有一段延迟，在这段时间内您可以看到“这里什么都没有！” 部分出现和消失。
2021-05-17 16:48:20

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

但在这种情况下，过滤器被执行两次，有没有办法避免这种情况？
2021-04-25 16:48:20
感谢您提供此解决方案。我一直在使用这里提供的 groupBy 过滤器github.com/a8m/angular-filter但不幸的是上面接受的答案不起作用。此方法可能会执行过滤器两次，但无论如何它都解决了问题。
2021-04-30 16:48:20
在我的情况下，它可以在没有“== 0”的情况下工作。<p ng-show="(bars | filter:barFilter).length">这里什么都没有！</p>
2021-05-02 16:48:20

取自这个官方文件，他们是这样做的：

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>
我怀疑自从第一次问这个问题以来事情发生了变化，但鉴于目前这正是 Angular 的文档建议您解决问题的方式，我会说这是此时的正确方法。
2021-04-27 16:48:20
我找不到另一个例子。这是“隐藏”的，在他们的动画文档中，我偶然在需要它的同一天注意到它，或者我认为我不会记得。
2021-05-16 16:48:20
其它你可能感兴趣的问题
上一篇_.each(list, iterator, [context]) 中的上下文是什么？ 下一篇可见性：隐藏与显示：无与不透明度：0