As tabelas são um dos elementos comuns usados em HTML ao trabalhar com páginas da web.
As tabelas em HTML são projetadas usando a tag HTML
Tag
- Esta é a tag principal usada para exibir a tabela.
- Esta tag é usada para separar as linhas da tabela.
- Esta tag é usada para exibir os dados reais da tabela.
- Isso é usado para os dados do cabeçalho da tabela.
Usando as tags HTML disponíveis acima junto com AngularJS, podemos tornar mais fácil preencher os dados da tabela. Resumindo, a diretiva ng-repeat é usada para preencher os dados da tabela.
Veremos como fazer isso durante este capítulo. Também veremos como podemos usar os filtros orderby e maiúscula junto com o uso do atributo $ index para exibir índices de tabelas angulares.
Neste tutorial, você aprenderá-
Preencher e exibir dados em uma tabela
Filtro embutido AngularJS
Classificar tabela com filtro OrderBy
Tabela de exibição com filtro de maiúsculas
Exibir o índice da tabela ($ index)
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 angulares.
Neste exemplo,
Vamos criar uma tabela Angular que terá os tópicos do curso junto com suas descrições.
Etapa 1) Primeiro vamos adicionar uma tag de "estilo" à nossa página HTML para que a tabela possa ser exibida como uma tabela adequada.
A tag de estilo é adicionada à página HTML. Esta é a maneira padrão de adicionar quaisquer atributos de formatação necessários para os elementos HTML.
Estamos adicionando dois valores de estilo à nossa tabela.
Uma é que deve haver uma borda sólida para nossa mesa angular e
Em segundo lugar, deve haver preenchimento para os dados da nossa tabela Angular.
Etapa 2) A próxima etapa é escrever o código para gerar a tabela e seus dados.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Explicação do código:
Primeiro, estamos criando uma variável chamada "tutorial" e atribuindo a ela alguns pares de valores-chave em uma 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 acessado de nossa visão.
Esta é a primeira etapa na criação de uma tabela e usamos a tag
.
Para cada linha de dados, estamos usando a "diretiva ng-repeat". Essa diretiva passa por cada par de valores-chave no objeto de escopo tuto, rial usando a variável ptutor.
Finalmente, estamos usando a tag
junto com os pares de valores-chave (ptutor.Name e ptutor.Description) para exibir os dados da tabela Angular.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
A partir da saída acima,
Podemos ver que a tabela é exibida corretamente com os dados da matriz de pares de valores-chave definidos no controlador.
Os dados da tabela foram gerados passando por cada um dos pares de valores-chave usando a "diretiva ng-repeat".
Filtro embutido AngularJS
É muito comum usar os filtros embutidos no AngularJS para alterar a forma como os dados são exibidos nas tabelas. Já vimos os filtros em ação em um capítulo anterior. Vamos recapitular rapidamente os filtros antes de prosseguirmos.
Em Angular.JS, os filtros são usados para formatar o valor da expressão antes de ser exibido para o usuário. Um exemplo de filtro é o filtro 'maiúsculo' que assume uma saída de string e formata a string e exibe todos os caracteres na string como maiúsculas.
Portanto, no exemplo abaixo, se o valor da variável 'TutorialName' for 'AngularJS', a saída da expressão abaixo será 'ANGULARJS'.
{{TurotialName | maiúsculas}}
Nesta seção, veremos como os filtros orderBy e maiúsculas podem ser usados em tabelas com mais detalhes.
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 Angular apareceu conforme mostrado abaixo.
Controladores
Controladores em ação
Modelos
Modelos e dados de ligação
Diretivas
Flexibilidade de Diretivas
Vejamos um exemplo de como podemos usar o filtro "orderBy" e classificar os dados da tabela Angular usando a primeira coluna da tabela.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Explicação do código:
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 mesa pela chave "Nome".
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
Da saída,
Podemos ver que os dados da tabela Angular foram classificados de acordo com os dados da primeira coluna. Em nosso conjunto de dados, os dados de "Diretivas" vêm dos dados de "Modelos", mas como aplicamos o filtro orderBy, as tabelas são classificadas de acordo.
Tabela de exibição com filtro de maiúsculas
Também podemos usar o filtro de maiúsculas para alterar os dados da tabela Angular para maiúsculas.
Vamos dar uma olhada em um exemplo de como podemos conseguir isso.
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
Explicação do código:
Estamos usando o mesmo código que usamos para criar nossa tabela, a única diferença desta vez é que estamos usando o filtro de maiúsculas. Estamos usando este filtro em conjunto com o "ptutor.Name" para que todo o texto da primeira coluna seja exibido em maiúsculas.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
Da saída,
Podemos ver que, usando o filtro "maiúsculas", todos os dados da primeira coluna são exibidos com caracteres maiúsculos.
Exibir o índice da tabela ($ index)
Para exibir o índice da tabela, adicione um
com $ index.
Vamos dar uma olhada em um exemplo de como podemos conseguir isso.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Explicação do código:
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 do índice.
Nesta coluna adicional, estamos usando a propriedade "$ index" fornecida pelo AngularJS e, em seguida, usando o operador +1 para incrementar o índice para cada linha.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
Da saída,
Você pode ver que uma coluna adicional foi criada. Nesta coluna, podemos ver os índices sendo criados para cada linha.
Resumo:
As estruturas da tabela são criadas usando as tags padrão disponíveis no HTML. Os dados na tabela são preenchidos usando a diretiva "ng-repeat".
O filtro orderBy pode ser usado para classificar a tabela com base em qualquer coluna da tabela.
O filtro de maiúsculas pode ser usado para exibir os dados em qualquer coluna baseada em texto em maiúsculas.
A propriedade "$ index" pode ser usada para criar um índice para a tabela.
Um problema comum encontrado durante o desenvolvimento com tabelas AngularJS.JS é a implementação de grandes conjuntos de dados com mais de 1000 linhas de dados. Às vezes, a diretiva ng-repeat pode deixar de responder e, portanto, a página inteira às vezes deixa de responder. Nesse caso, é sempre melhor ter paginação em que as linhas de dados são espalhadas por várias páginas.
