AngularJS - заполнитель для пустого результата от фильтра

95

Я хочу иметь заполнитель, например, <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/

Спасибо!

Адриан Гунаван
источник
ах да хороший трюк с нг-шоу. Большое спасибо
Адриан Гунаван

Ответы:

252

Доработка подхода, при которой требуется указать фильтр только один раз:

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

Скрипка

Марк Райкок
источник
6
Это более приятное решение, поскольку вам нужно только один раз объявить свой фильтр. +1
Тим Би Джеймс
1
Проблема в том, что "Здесь ничего!" часть отображается и скрывается очень быстро. Когда вы получаете данные с помощью запроса ajax, перед отображением возвращенных данных происходит задержка, и за это время вы можете увидеть сообщение «Здесь ничего нет!» части появляются и исчезают.
Temega
@Temega - вы можете добавить класс "ng-hide" в div
Брайан Оливер
3
@Temega Вы могли бы использовать ng-show = "
filterBars.length
Я использую ng-controller = "FooController as $ ctrl" и сделал "bar в $ ctrl.filteredBars = (bars | filter: barFilter)", чтобы я мог даже использовать $ ctrl.filteredBars.length вне ng-repeat. Спасибо за этот эпический намек!
xlttj 05
37

Вот трюк с использованием 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/

Адриан Гунаван
источник
2
Но в этом случае фильтр выполняется дважды, есть ли способ этого избежать?
Исайя,
Спасибо за это решение. Я использовал фильтр groupBy, представленный здесь github.com/a8m/angular-filter, но, к сожалению, принятый выше ответ не работает. Этот метод может выполнить фильтр дважды, но он все равно решил проблему.
Энтони
В моем случае он работает без «== 0». <p ng-show = "(bars | filter: barFilter) .length"> Здесь ничего нет! </p>
Алессио
22

Взято из этого официального документа, вот как они это делают:

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>
caiocpricci2
источник
4
Я подозреваю, что все изменилось с тех пор, как этот вопрос был задан впервые, но, учитывая, что в настоящее время именно так в документации Angular предлагается решить проблему, я бы сказал, что это правильный путь на данный момент.
jackel414
1
Другой пример найти не удалось. Это «спрятано» в их документации по анимации, и я случайно заметил это в тот же день, когда мне это было нужно, иначе я не думаю, что вспомнил бы.
caiocpricci2