Caixa de listagem vazia do manipulador de repetição angularJS

Eu pensei que isso seria uma coisa muito comum, mas não consegui encontrar como lidar com isso no AngularJS. Digamos que eu tenho uma lista de eventos e quero produzi-los com o AngularJS, então isso é bem fácil:

<ul>
    <li ng-repeat="event in events">{{event.title}}</li>
</ul>

Mas como eu manejo o caso quando a lista está vazia? Quero ter uma caixa de mensagem no lugar em que a lista esteja com algo como "Nenhum evento" ou similar. A única coisa que chegaria perto é ng-switchcom events.length(como verifico se vazio quando um objeto e não uma matriz?), Mas essa é realmente a única opção que tenho?

Você pode usar o ngShow .

<li ng-show="!events.length">No events</li>

Veja exemplo .

Ou você pode usar o ngHide

<li ng-hide="events.length">No events</li>

Veja exemplo .

Para objeto, você pode testar Object.keys .

E se você quiser usar isso com uma lista filtrada, aqui está um truque:

<ul>
    <li ng-repeat="item in filteredItems  = (items | filter:keyword)">
        ...
    </li>
</ul>
<div ng-hide="filteredItems.length">No items found</div>

Você pode querer verificar a diretiva angular-ui ui-if se quiser remover o uldo DOM quando a lista estiver vazia:

<ul ui-if="!!events.length">
    <li ng-repeat="event in events">{{event.title}}</li>
</ul>

Com as versões mais recentes do angularjs, a resposta correta para esta pergunta é usar ng-if:

<ul>
  <li ng-if="list.length === 0">( No items in this list yet! )</li>
  <li ng-repeat="item in list">{{ item }}</li>
</ul>

Essa solução não piscará quando a lista estiver prestes a baixar porque a lista precisa ser definida e com um comprimento de 0 para que a mensagem seja exibida.

Aqui está um plunker para mostrá-lo em uso: http://plnkr.co/edit/in7ha1wTlpuVgamiOblS?p=preview

Dica: você também pode mostrar um texto ou botão giratório de carregamento:

  <li ng-if="!list">( Loading... )</li>

<ul>
    <li ng-repeat="item in items | filter:keyword as filteredItems">
        ...
    </li>
    <li ng-if="filteredItems.length===0">
        No items found
    </li>
</ul>

Isso é semelhante ao @Konrad 'ktoso' Malawski, mas um pouco mais fácil de lembrar.

Testado com Angular 1.4

Aqui está uma abordagem diferente usando CSS em vez de JavaScript / AngularJS.

CSS:

.emptymsg {
  display: list-item;
}

li + .emptymsg {
  display: none;
}

Marcação:

<ul>
    <li ng-repeat="item in filteredItems"> ... </li>
    <li class="emptymsg">No items found</li>
</ul>

Se a lista estiver vazia, o <li ng-repeat = "item no filterItems"> etc. será comentado e se tornará um comentário em vez de um elemento li.

Você pode usar este ng-switch:

<div ng-app ng-controller="friendsCtrl">
  <label>Search: </label><input ng-model="searchText" type="text">
  <div ng-init="filtered = (friends | filter:searchText)">
  <h3>'Found '{{(friends | filter:searchText).length}} friends</h3>
  <div ng-switch="(friends | filter:searchText).length">
    <span class="ng-empty" ng-switch-when="0">No friends</span>
    <table ng-switch-default>
      <thead>  
        <tr>
          <th>Name</th>
          <th>Phone</th>
        </tr>
      </thead>
      <tbody>
      <tr ng-repeat="friend in friends | filter:searchText">
        <td>{{friend.name}}</td>
        <td>{{friend.phone}}</td>
      </tr>
    </tbody>
  </table>
</div>

Você pode usar a aspalavra-chave para referenciar uma coleção em um ng-repeatelemento:

<table>
    <tr ng-repeat="task in tasks | filter:category | filter:query as res">
        <td>{{task.id}}</td>
        <td>{{task.description}}</td>
    </tr>
    <tr ng-if="res.length === 0">
        <td colspan="2">no results</td>
    </tr>
</table>

Eu costumo usar o ng-show

<li ng-show="variable.length"></li>

onde variável você define, por exemplo

<div class="list-group-item" ng-repeat="product in store.products">
   <li ng-show="product.length">show something</li>
</div>

você pode usar ng-if porque isso não é renderizado na página html e você não vê sua tag html na inspeção ...

<ul ng-repeat="item in items" ng-if="items.length > 0">
    <li>{{item}}<li>
</ul>
<div class="alert alert-info">there is no items!</div>