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

问题描述

我想要一个占位符，例如 当过滤器结果返回空时.有人可以帮忙吗?我什至不知道从哪里开始......

HTML:

<h1>我的傻瓜</h1><ul><li ng-repeat="foo in foos"><a href="#" ng-click="setBarFilter(foo.name)">{{foo.name}}</a><br/><h1>我的酒吧</h1><ul><li ng-repeat="bar in bar | filter:barFilter">{{bar.name}}</li>

JS:

function Ctrl($scope) {$scope.foos = [{名称:'Foo 1'},{名称:'Foo 2'},{名称:'Foo 3'}];$scope.bars = [{name: '酒吧 1',富:'富1'},{name: '酒吧 2',foo: 'Foo 2'}];$scope.setBarFilter = 函数(foo_name){$scope.barFilter = {};$scope.barFilter.foo = foo_name;}}

jsFiddle:http://jsfiddle.net/adrn/PEumV/1/

谢谢！

解决方案

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

 <li ng-repeat="bar in filtersBars = (bars | filter:barFilter)">{{bar.name}}</li><p ng-hide="filteredBars.length">这里什么都没有！</p>

小提琴

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/

Thanks!

解决方案

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>

Fiddle

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