Tabela AngularJS: classificação, filtro OrderBy e letras maiúsculas [exemplos]

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 segregar 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 facilitar o preenchimento dos dados da tabela. Resumindo, a diretiva ng-repeat é usada para preencher os dados da tabela.

Veremos como conseguir isso durante este capítulo. Também veremos como podemos usar os filtros orderby e maiúsculas junto com o atributo $index para exibir índices de tabelas Angular.

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 Angular.
Neste exemplo,

Vamos criar uma tabela Angular que conterá os tópicos do curso junto 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.

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.
Estamos adicionando dois valores de estilo à nossa tabela.

Uma é que deve haver uma borda sólida para a nossa tabela Angular e
A segunda é que deve haver preenchimento para os dados da nossa tabela Angular.

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

<!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>

Explicação do código

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.
Este é o primeiro passo na criação de uma tabela e usamos o método marcação.
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.
Finalmente, estamos usando o tag junto com os pares de valores-chave (ptutor.Name e ptutor.Descriptíon) para exibir os dados da tabela Angular.

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

saída

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”.

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 Angular.JS, os filtros são usados para formatar o valor da expressão antes de ser exibido ao usuário. Um exemplo de filtro é o filtro 'maiúsculas' que assume uma saída de string e formata a string e exibe todos os caracteres da string como letras maiúsculas.

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

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 dos dados da nossa tabela Angular apareceu conforme 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 Angular usando a primeira coluna 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 | 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>

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 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

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 letras maiúsculas

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

Vejamos um exemplo de como podemos conseguir isso.

<!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>

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 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

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.

Exibir o índice da tabela ($index)

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

Vejamos um exemplo de como podemos conseguir isso.

<!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>

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 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

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 de tabelas são criadas usando as tags padrão disponíveis em HTML. Os dados da 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 letras maiúsculas pode ser usado para exibir os dados em qualquer coluna baseada em texto em letras 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 que possuem mais de 1000 linhas de dados. Às vezes o ng-repetir A diretiva pode deixar de responder e, portanto, a página inteira às vezes deixa de responder. Nesse caso, é sempre melhor ter uma paginação em que as linhas de dados estejam espalhadas por várias páginas.

Você pode gostar:

Preencher e exibir dados em uma tabela

Explicação do código

saída

ARTIGOS RELACIONADOS

Filtro embutido AngularJS

Classificar tabela com filtro OrderBy

Explicação do código

saída

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

Explicação do código

saída

Exibir o índice da tabela ($index)

Explicação do código

saída

Resumo