Tabela AngularJS: Classificar com orderBy e filtro de maiúsculas

Por: James Hartmann James Hartmann
Hours Atualização do

⚡ Resumo Inteligente

A classificação, ordenação e formatação de texto em tabelas AngularJS dependem da diretiva `ng-repeat` e de uma expressão de filtro. Esta página mostra como `orderBy`, `uppercase`, `filter` e `$index` transformam uma tabela HTML simples em uma grade dinâmica e orientada a dados.

  • 🧱 Estrutura: As tags `<table>`, `<tr>`, `<td>` e `<th>` ainda compõem a grade, portanto, nenhuma marcação específica do AngularJS substitui o HTML padrão.
  • 🔁 População: A diretiva ng-repeat percorre um array no objeto de escopo e emite uma linha para cada item encontrado.
  • ↕️ Encomenda: O filtro orderBy classifica as linhas por qualquer chave, e um indicador de reversão inverte a direção sob demanda.
  • 🔤 Formatação: O filtro de maiúsculas capitaliza uma única coluna sem alterar os dados subjacentes no controlador.
  • 🔎 Procurando: O filtro vinculado a uma entrada ng-model restringe as linhas visíveis à medida que o leitor digita.
  • 🔢 Numeração: A propriedade $index fornece um contador baseado em zero, portanto, adicionar um produz um número de linha legível.
  • 🚀 Escala: Além de mil linhas, combine limitTo com paginação e track para manter a página responsiva.
Saiba Mais

Tabela Angular JS

As tabelas são um dos elementos comuns usados ​​em HTML ao trabalhar com páginas da web.

Tabelas em HTML são projetados usando a tag HTML

  1. tag – Esta é a tag principal usada para exibir a tabela.
  2. – Esta tag é usada para segregar as linhas da tabela.
  3. – Esta tag é usada para exibir os dados reais da tabela.
  4. – Isso é usado para os dados do cabeçalho da tabela.

Usando as tags HTML disponíveis acima junto com AngularJS, podemos facilitar o preenchimento dos dados da tabela. Resumindo, a diretiva ng-repeat é usada para preencher os dados da tabela.

Neste capítulo, veremos como alcançar esse objetivo. Também veremos como usar os filtros `orderBy` e `uppercase`, além do atributo `$index`, para exibir os índices de uma tabela do AngularJS. O primeiro passo é a própria marcação (`markup`).

Preencher e exibir dados em uma tabela

Conforme discutimos na introdução deste capítulo, a base para a criação da estrutura da tabela em uma página HTML permanece a mesma.

A estrutura da tabela ainda é criada usando as tags HTML normais de , , e . No entanto, os dados são preenchidos usando a diretiva ng-repeat no AngularJS.
Vejamos um exemplo simples de como podemos implementar tabelas no AngularJS.
Neste exemplo,

Vamos criar uma tabela em AngularJS que conterá os tópicos dos cursos juntamente com suas descrições.

Passo 1) Primeiro adicionaremos uma tag “style” à nossa página HTML para que a tabela possa ser exibida como uma tabela adequada.

Preencher e exibir dados em uma tabela

  1. A tag de estilo é adicionada à página HTML. Esta é a maneira padrão de adicionar quaisquer atributos de formatação necessários para elementos HTML.
  2. Estamos adicionando dois valores de estilo à nossa tabela.
  • Uma delas é que deve haver uma borda sólida para nossa tabela AngularJS e
  • Em segundo lugar, devemos adicionar espaçamento (padding) aos dados da nossa tabela AngularJS.

Passo 2) A próxima etapa é escrever o código para gerar a tabela e seus dados.

Preencher e exibir dados em uma tabela

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

⚠️ Aviso: Esta lista foi reproduzida exatamente como publicada, e quatro linhas nela estão incorretas. chrset erros ortográficos charsetTrês versões do AngularJS são carregadas simultaneamente, o que é uma a mais do que o necessário. lib/bootstrap.js e lib/bootstrap.css não existem. Mantenha angular.min.js só.

Code Explicação

  1. Primeiro, estamos criando uma variável chamada “tutorial” e atribuindo a ela alguns pares de valores-chave em uma única etapa. Cada par de valores-chave será usado como dados ao exibir a tabela. A variável tutorial é então atribuída ao objeto de escopo para que possa ser acessada a partir de nossa visualização.
  2. Este é o primeiro passo na criação de uma tabela e usamos o método marcação.
  3. Para cada linha de dados, estamos usando a “diretiva ng-repeat”. Esta diretiva passa por cada par de valores-chave no objeto de escopo do tutorial usando a variável ptutor.
  4. Finalmente, estamos usando o tag junto com os pares de valores-chave (ptutor.Name e ptutor.Description) para exibir os dados da tabela AngularJS.

Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.

saída

Preencher e exibir dados em uma tabela

Da saída acima,

  • Podemos ver que a tabela é exibida corretamente com os dados do array de pares chave-valor definidos no controlador.
  • Os dados da tabela foram gerados percorrendo cada um dos pares de valores-chave usando a “diretiva ng-repeat”.

As linhas brutas são apenas o ponto de partida, pois os filtros decidem como essas linhas são ordenadas e formatadas.

Filtro embutido AngularJS

É muito comum usar filtros embutidos no AngularJS para alterar a forma como os dados são exibidos nas tabelas. Já vimos filtros em ação em um capítulo anterior. Vamos recapitular rapidamente os filtros antes de prosseguirmos.

Em AngularJS, os filtros são usados ​​para formatar o valor de uma expressão antes de exibi-la ao usuário. Um exemplo de filtro é o filtro 'uppercase', que recebe uma string como saída, formata-a e exibe todos os caracteres da string em maiúsculas.

Portanto, no exemplo abaixo, se o valor da variável 'TutorialName' for 'AngularJS', a saída da expressão abaixo será 'ANGULARJS'.

{{ TutorialName | uppercase }}

Nesta seção, veremos como os filtros orderBy e maiúsculas podem ser usados ​​em tabelas com mais detalhes.

Filtros comuns do AngularJS usados ​​com tabelas

A tabela abaixo compara os filtros mais frequentemente usados ​​dentro de uma expressão ng-repeat.

Filtrar Propósito Exemplo
ordenar por Classifica as linhas por uma chave. | orderBy : 'Name'
filtro Mantém as linhas correspondentes | filter : searchText
maiúsculas Texto em maiúsculas | uppercase
minúsculas Reduz o texto | lowercase
limitePara Contagem de linhas de maiúsculas | limitTo : 25
moeda Formatos de dinheiro | currency : '$'
dados Formatos de datas | date : 'dd MMM yyyy'
número Define decimais | number : 2

A ordenação é o filtro que os leitores mais solicitam, portanto, o filtro orderBy vem em seguida.

Classificar tabela com filtro OrderBy

Este filtro é usado para classificar a tabela com base em uma das colunas da tabela. No exemplo anterior, a saída para os dados da nossa tabela AngularJS apareceu como mostrado abaixo.

controladores Controladores em ação
Modelos Modelos e dados vinculativos
instruções Flexibilidade das Diretivas

Vejamos um exemplo de como podemos usar o filtro "orderBy" e classificar os dados da tabela AngularJS usando a primeira coluna da tabela.

Classificar tabela com filtro OrderBy

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial | orderBy : 'Name'">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code Explicação

  1. Estamos usando o mesmo código que usamos para criar nossa tabela, a única diferença desta vez é que estamos usando o filtro “orderBy” junto com a diretiva ng-repeat. Neste caso, estamos dizendo que queremos ordenar a tabela pela chave “Nome”.

Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.

saída

Classificar tabela com filtro OrderBy

Da saída,

  • Podemos ver que os dados na tabela AngularJS foram classificados de acordo com os dados da primeira coluna. O array é declarado na ordem Controllers, Models, Directives, portanto, sem um filtro, as linhas aparecem nessa ordem. Aplicando orderBy : 'Name' Organiza os valores de Nome em ordem alfabética, o que coloca as Diretivas à frente dos Modelos e produz Controladores, Diretivas e Modelos.

Classificar em Reverse e dos cabeçalhos das colunas

O filtro orderBy aceita um segundo argumento. Passando true inverte a direção, e armazenar tanto a chave quanto esse sinalizador no escopo permite que um leitor reordene a tabela clicando em um cabeçalho, como o ordenar por referência descreve.

<table>
    <tr>
        <th ng-click="sortKey='Name'; reverse=!reverse">Name</th>
        <th ng-click="sortKey='Description'; reverse=!reverse">Description</th>
    </tr>
    <tr ng-repeat="ptutor in tutorial | orderBy : sortKey : reverse">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

A ordenação altera a sequência das linhas. O próximo filtro altera a forma como uma única coluna é exibida.

ARTIGOS RELACIONADOS

Tabela de exibição com filtro de letras maiúsculas

Também podemos usar o filtro de maiúsculas para converter os dados da tabela AngularJS para letras maiúsculas.

Vejamos um exemplo de como podemos conseguir isso.

Tabela de exibição com filtro de letras maiúsculas

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name | uppercase}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code Explicação

  1. Estamos usando o mesmo código que usamos para criar nossa tabela, a única diferença desta vez é que estamos usando o filtro de letras maiúsculas. Estamos utilizando este filtro em conjunto com “ptutor.Name” para que todo o texto da primeira coluna seja exibido em maiúsculas.

Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.

saída

Tabela de exibição com filtro de letras maiúsculas

Da saída,

  • Podemos observar que ao utilizar o filtro “maiúsculas”, todos os dados da primeira coluna são exibidos com caracteres maiúsculos.

Formatar uma coluna é útil, e os leitores geralmente desejam um número de linha ao lado dela.

Exibir o índice da tabela ($index)

Para exibir o índice da tabela, adicione um com $ índice.

Vejamos um exemplo de como podemos conseguir isso.

Exibir o índice da tabela

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{$index + 1}}</td>
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code Explicação

  1. Estamos usando o mesmo código que usamos para criar nossa tabela, a única diferença desta vez é que estamos adicionando uma linha extra à nossa tabela para exibir a coluna de índice. Nesta coluna adicional, estamos usando a propriedade “$index” fornecido pelo AngularJS e depois usando o operador +1 para incrementar o índice para cada linha.

Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.

saída

Exibir o índice da tabela

Da saída,

  • Você pode ver que uma coluna adicional foi criada. Nesta coluna podemos ver os índices sendo criados para cada linha.

Três linhas cabem em uma tela. Um conjunto de dados realista não cabe, então os leitores precisam de uma maneira de pesquisá-lo.

Como filtrar e pesquisar dados de tabela no AngularJS

O AngularJS inclui um filtro chamado filterColocado após o ng-repeat, ele compara cada item da matriz com um valor e mantém apenas as linhas correspondentes. Vincule esse valor a uma caixa de texto com ng-model e a tabela se restringe automaticamente enquanto o leitor digita, sem a necessidade de manipuladores de eventos ou código de controlador.

Adicionar uma pesquisa ao vivo Box

Adicione um campo de entrada acima da tabela e passe o array pelo filtro. Os dois compartilham a mesma propriedade de escopo, então o AngularJS reavalia a expressão a cada tecla pressionada.

<input type="text" ng-model="searchText" placeholder="Search topics">

<table>
    <tr ng-repeat="ptutor in tutorial | filter : searchText">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

Code Explicação:

  1. O campo de entrada grava tudo o que for digitado. searchText no escopo.
  2. filter : searchText mantém linhas cujo nome ou Description contém essa substring, ignorando maiúsculas e minúsculas.
  3. Para pesquisar em uma única coluna, passe um objeto: filter : {Name : searchText}.
  4. Os filtros encadeiam, então | filter : searchText | orderBy : 'Name' Primeiro realiza a busca e depois classifica os sobreviventes.

Mantenha as mesas grandes responsivas

Um problema comum encontrado durante o desenvolvimento com tabelas AngularJS é um grande conjunto de dados contendo mil linhas ou mais. ng-repetir A diretiva cria um escopo e um observador por linha, permitindo que a página pare de responder. Em vez disso, distribua as linhas por várias páginas e adicione track by Assim, as linhas existentes são reutilizadas em vez de serem reconstruídas.

<tr ng-repeat="ptutor in tutorial | filter : searchText | limitTo : 25 track by ptutor.Name">

Perguntas Frequentes

O ng-repeat precisa de uma chave única para cada linha. Dois valores idênticos geram um erro de duplicatas. Adicione uma propriedade distinta ou escreva track por $index, de forma que a posição da linha se torne a chave em vez de seu valor.

Sim. Passe um array de chaves, como orderBy: ['Name','DescriptO AngularJS ordena pela primeira chave e, em caso de empate, usa a segunda como critério de desempate. Adicione um sinal de menos antes de uma chave para inverter apenas essa chave.

Cada linha `ng-repeat` expõe os valores booleanos `$even` e `$odd`. Associe um deles a `ng-class` ou `ng-if` para aplicar uma cor de fundo, o que produz linhas listradas sem a necessidade de qualquer seletor CSS adicional na tabela.

Assistentes como Copiloto do GitHub Eles criam rapidamente a estrutura de marcação ng-repeat, mas ainda inventam caminhos de script e erram na ortografia dos atributos. Verifique cada sugestão em relação ao Referência de filtro AngularJS antes do envioping.

As ferramentas de IA reescrevem o ng-repeat como um bloco de fluxo de controle e movem os filtros para pipes ou sinais. Porque Angular Não possui um filtro ou opção de ordenação integrada; revise manualmente cada classificação e pesquisa gerada.

Resuma esta postagem com: