25.03.2025

Exibindo um Placeholder Quando o Filtro Está Vazio no AngularJS

Resumo Rápido

Para exibir um placeholder no AngularJS quando não há resultados após o filtragem, você deve usar a diretiva ng-show:

<div ng-app="myApp" ng-controller="myListCtrl">
  <ul>
    <li ng-repeat="item in filteredItems = (items | filter:searchText)" ng-bind="item"></li>
  </ul>
  <p ng-show="!filteredItems.length">Nenhum item encontrado.</p>
</div>

A mensagem "Nenhum item encontrado" é exibida quando o número de itens na lista filtrada é zero, o que é verificado usando a expressão !filteredItems.length.

Melhorando Desempenho e Usabilidade

Para melhorar o desempenho, é recomendado declarar o filtro apenas uma vez no HTML. Usar atributos aria-label melhora a acessibilidade para usuários de leitores de tela.

<input type="text" ng-model="searchText" aria-label="Buscar itens" placeholder="Buscar...">
<ul>
  <li ng-repeat="item in items | filter:searchText as filteredItems" ng-bind="item"></li>
</ul>
<p ng-show="!filteredItems.length">Nenhum item encontrado.</p>

Aprimorando a Animação

Vamos tornar as animações dos itens da lista mais suaves aplicando a classe animate-repeat com um efeito de transição suave.

.animate-repeat {
  transition: all 0.5s ease-in-out; /* Garante animações suaves sem pulos */
}

Aplicamos essa classe aos itens da lista para garantir a animação com a diretiva ng-repeat:

<li ng-repeat="item in filteredItems = (items | filter:searchText)" ng-bind="item" class="animate-repeat"></li>

Lembre-se sempre de fechar corretamente as tags HTML e manter o código limpo e estruturado.

Adicionando Atualizações Dinâmicas

Para garantir atualizações dinâmicas da lista diretamente na interface do usuário, use o seguinte código:

<input type="text" ng-model="searchText" aria-label="Buscar itens" placeholder="Buscar...">
<ul>
  <li ng-repeat="item in items | filter:searchText as filteredItems" ng-bind="item" ng-click="selectItem(item)"></li>
</ul>
<p ng-show="!filteredItems.length">Nenhum item encontrado.</p>

O evento ng-click desencadeia a seleção de um item, tornando a lista interativa. Essa abordagem simplifica bastante a manutenção do código a longo prazo.

Visualização

Você pode visualizar um aplicativo AngularJS como um teatro:

🎭: [🎩, 🎤, 🃏, 🎺]

O filtro atua como um holofote que destaca o performer:

cenário.filter(performer => performer === '🎤');

Se o holofote não encontrar o performer, o palco ficará vazio:

🎭🔦: []

No entanto, usamos um placeholder (🃏) para que o palco não pareça vazio:

cenário.filter(performer => performer === '🎤').length ? [🎤] : [🃏];

Graças a essa abordagem, há sempre um elemento no palco:

🎭🔦🃏: [🃏] // O placeholder aparece quando o elemento desejado não é encontrado.

Manter os princípios de desempenho garante que seu aplicativo esteja sempre pronto para ação.

Organização do Código e Melhores Práticas

Para manter seu aplicativo AngularJS bem estruturado, siga as diretrizes oficiais:

• ng-if e ng-show/ng-hide são usados para gerenciar a exibição de conteúdo com base em condições.
• ng-model permite a filtragem em tempo real do conteúdo. As mudanças são refletidas imediatamente após a entrada de texto.
• Se não houver correspondências, o usuário deve ser informado, por exemplo: "Nenhum resultado encontrado.".
• Ao compartilhar exemplos de código, use <pre><code>. É uma maneira conveniente de compartilhar trechos; é como Instagram para desenvolvedores.
• Links para jsFiddle podem ajudar a fornecer descrições de código mais detalhadas.

Recursos Úteis

1. AngularJS — Documentação oficial do AngularJS sobre filtros.
2. Filtros do Angular — Recurso educativo do W3Schools sobre filtros no AngularJS.
3. :placeholder-shown | CSS-Tricks — Informações sobre a personalização da exibição de campos de entrada com placeholders em CSS.
4. Operador condicional (ternário) - JavaScript | MDN — Descrição da sintaxe condicional em JavaScript.
5. AngularJS - Filtros — Explicação detalhada sobre filtros no AngularJS.

Conclusão

Ao aproveitarmos as capacidades do AngularJS, melhoramos a experiência do usuário, aumentamos a acessibilidade e mantemos o dinamismo de nossas ferramentas. Dominar essas ferramentas é uma habilidade valiosa. Se você gostou deste artigo, mostre seu apoio! Boas programações!👩‍💻

Video

Navigation