Tabla de AngularJS: Ordenar con orderBy y filtro de mayúsculas

Por: james hartman james hartman
Hours Actualizado

⚡ Resumen inteligente

La ordenación, el ordenamiento y el formato de texto de las tablas en AngularJS se basan en la directiva ng-repeat y una expresión de filtro. Esta página muestra cómo orderBy, uppercase, filter y $index transforman una tabla HTML simple en una cuadrícula dinámica basada en datos.

  • 🧱 Estructura: Las etiquetas table, tr, td y th siguen construyendo la cuadrícula, por lo que ningún marcado específico de AngularJS reemplaza el HTML estándar.
  • 🔁 Población: La directiva ng-repeat recorre un array en el objeto scope y emite una fila por cada elemento que encuentra.
  • ↕️ Orden: El filtro orderBy ordena las filas por cualquier clave, y un indicador reverse invierte la dirección según se desee.
  • 🔤 Formateo: El filtro de mayúsculas convierte una sola columna a mayúsculas sin alterar los datos subyacentes en el controlador.
  • 🔎 Buscando: El filtro vinculado a una entrada ng-model reduce el número de filas visibles a medida que el lector escribe.
  • 🔢 Numeración: La propiedad $index proporciona un contador basado en cero, por lo que al sumarle uno se obtiene un número de fila legible.
  • 🚀 Escala: Más allá de mil filas, combine limitTo con paginación y track para mantener la página adaptable.
Descubre más

Tabla AngularJS

Las tablas son uno de los elementos comunes utilizados en HTML cuando se trabaja con páginas web.

Tablas en HTML están diseñados utilizando la etiqueta HTML

  1. etiqueta: esta es la etiqueta principal utilizada para mostrar la tabla.
  2. – Esta etiqueta se utiliza para segregar las filas dentro de la tabla.
  3. – Esta etiqueta se utiliza para mostrar los datos reales de la tabla.
  4. – Esto se utiliza para los datos del encabezado de la tabla.

Usando las etiquetas HTML disponibles arriba junto con AngularJS, podemos facilitar el llenado de datos de la tabla. En resumen, la directiva ng-repeat se utiliza para completar los datos de la tabla.

En este capítulo veremos cómo lograrlo. También analizaremos cómo usar los filtros `orderBy` y `uppercase`, además de cómo usar el atributo `$index` para mostrar los índices de las tablas de AngularJS. El primer paso es el marcado en sí.

Completar y mostrar datos en una tabla

Como comentamos en la introducción de este capítulo, la base para crear la estructura de tabla en una página HTML sigue siendo la misma.

La estructura de la tabla todavía se crea utilizando las etiquetas HTML normales de ,, y . Sin embargo, los datos se completan mediante la directiva ng-repeat en AngularJS.
Veamos un ejemplo sencillo de cómo podemos implementar tablas en AngularJS.
En este ejemplo,

Vamos a crear una tabla en AngularJS que contendrá los temas del curso junto con sus descripciones.

Paso 1) Primero agregaremos una etiqueta de "estilo" a nuestra página HTML para que la tabla pueda mostrarse como una tabla adecuada.

Completar y mostrar datos en una tabla

  1. La etiqueta de estilo se agrega a la página HTML. Esta es la forma estándar de agregar los atributos de formato necesarios para los elementos HTML.
  2. Estamos agregando dos valores de estilo a nuestra tabla.
  • Una es que debería haber un borde sólido para nuestra tabla AngularJS y
  • En segundo lugar, se debería añadir relleno a los datos de nuestra tabla de AngularJS.

Paso 2) El siguiente paso es escribir el código para generar la tabla y sus datos.

Completar y mostrar datos en una tabla

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

⚠️ Advertencia: Este listado se reproduce exactamente como se publicó, y cuatro de sus líneas son erróneas. chrset errores ortográficos charsetSe cargan tres compilaciones de AngularJS a la vez, lo cual es una de más. lib/bootstrap.js y lib/bootstrap.css no existen. Mantener angular.min.js solamente.

Code Explicación

  1. Primero, creamos una variable llamada "tutorial" y le asignamos algunos pares clave-valor en un solo paso. Cada par clave-valor se utilizará como datos al mostrar la tabla. Luego, la variable del tutorial se asigna al objeto de alcance para que se pueda acceder a él desde nuestra vista.
  2. Este es el primer paso para crear una tabla y usamos la etiqueta .
  3. Para cada fila de datos, utilizamos la "directiva ng-repeat". Esta directiva revisa cada par clave-valor en el objeto de alcance del tutorial utilizando la variable ptutor.
  4. Finalmente, estamos usando el etiqueta junto con los pares clave-valor (ptutor.Name y ptutor.Descriptión) para mostrar los datos de la tabla de AngularJS.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute el código en el navegador.

Resultado

Completar y mostrar datos en una tabla

Del resultado anterior,

  • Podemos ver que la tabla se muestra correctamente con los datos del conjunto de pares clave-valor definidos en el controlador.
  • Los datos de la tabla se generaron revisando cada uno de los pares clave-valor utilizando la "directiva ng-repeat".

Las filas sin procesar son solo el punto de partida, ya que los filtros deciden cómo se ordenan y formatean esas filas.

Filtro incorporado de AngularJS

Es muy común utilizar los filtros incorporados en AngularJS para cambiar la forma en que se muestran los datos en las tablas. Ya hemos visto filtros en acción en un capítulo anterior. Hagamos un resumen rápido de los filtros antes de continuar.

En AngularJS, los filtros se utilizan para formatear el valor de una expresión antes de mostrarla al usuario. Un ejemplo de filtro es el filtro 'uppercase', que toma una cadena de texto como salida, la formatea y muestra todos los caracteres en mayúsculas.

Entonces, en el siguiente ejemplo, si el valor de la variable 'TutorialName' es 'AngularJS', el resultado de la siguiente expresión será 'ANGULARJS'.

{{ TutorialName | uppercase }}

En esta sección, veremos con más detalle cómo se pueden usar los filtros ordenar por y mayúsculas en las tablas.

Filtros comunes de AngularJS utilizados con tablas

La tabla que aparece a continuación compara los filtros que se utilizan con mayor frecuencia dentro de una expresión ng-repeat.

Filtrar Propósito Ejemplo
ordenar por Ordena las filas por una clave. | orderBy : 'Name'
filtrar Mantiene las filas coincidentes | filter : searchText
mayúsculas Pon en mayúsculas el texto | uppercase
minúsculas Texto inferior | lowercase
limitarA Recuento de filas de mayúsculas | limitTo : 25
moneda Formatos de dinero | currency : '$'
datos Formatos de fechas | date : 'dd MMM yyyy'
número Establece decimales | number : 2

La ordenación es el filtro que los lectores solicitan en primer lugar, por lo que el filtro orderBy viene a continuación.

Ordenar tabla con filtro Ordenar por

Este filtro se utiliza para ordenar la tabla según una de sus columnas. En el ejemplo anterior, el resultado de los datos de nuestra tabla AngularJS se mostró como se indica a continuación.

Control Controladores en acción
Modelos Modelos y datos vinculantes.
instrucciones Flexibilidad de las directivas

Veamos un ejemplo de cómo podemos usar el filtro "orderBy" y ordenar los datos de la tabla de AngularJS usando la primera columna de la tabla.

Ordenar tabla con filtro Ordenar por

<!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 Explicación

  1. Estamos usando el mismo código que usamos para crear nuestra tabla, la única diferencia esta vez es que estamos usando el filtro "orderBy" junto con la directiva ng-repeat. En este caso estamos diciendo que queremos ordenar la tabla por la clave “Nombre”.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute el código en el navegador.

Resultado

Ordenar tabla con filtro Ordenar por

Desde la salida,

  • Podemos ver que los datos en la tabla de AngularJS se han ordenado según los datos de la primera columna. El array se declara en el orden Controladores, Modelos, Directivas, por lo que sin un filtro las filas aparecen en ese orden. Aplicando orderBy : 'Name' ordena los valores de Nombre alfabéticamente, lo que coloca las Directivas por delante de los Modelos y produce Controladores, Directivas, Modelos.

ordenar en Reverse y de los encabezados de columna

El filtro orderBy acepta un segundo argumento. Pasar true invierte la dirección y almacenar tanto la clave como esa bandera en el ámbito permite a un lector reordenar la tabla haciendo clic en un encabezado, como el ordenar por referencia describe

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

El ordenamiento modifica la secuencia de las filas. El siguiente filtro cambia la forma en que se lee una sola columna.

ARTÍCULOS RELACIONADOS

Tabla de visualización con filtro de mayúsculas

También podemos usar el filtro de mayúsculas para cambiar los datos de la tabla de AngularJS a mayúsculas.

Echemos un vistazo a un ejemplo de cómo podemos lograrlo.

Tabla de visualización con filtro de mayú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 Explicación

  1. Estamos usando el mismo código que usamos para crear nuestra tabla, la única diferencia esta vez es que estamos usando el filtro de mayúsculas. Estamos utilizando este filtro junto con "ptutor.Name" para que todo el texto de la primera columna se muestre en mayúsculas.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute el código en el navegador.

Resultado

Tabla de visualización con filtro de mayúsculas

Desde la salida,

  • Podemos ver que al usar el filtro “mayúsculas”, todos los datos de la primera columna se muestran con caracteres en mayúscula.

Dar formato a una columna es útil, y los lectores a menudo desean que aparezca el número de fila junto a ella.

Mostrar el índice de la tabla ($index)

Para mostrar el índice de la tabla, agregue un con $index.

Echemos un vistazo a un ejemplo de cómo podemos lograrlo.

Mostrar el índice de la tabla

<!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 Explicación

  1. Estamos usando el mismo código que usamos para crear nuestra tabla, la única diferencia esta vez es que estamos agregando una fila adicional a nuestra tabla para mostrar la columna de índice. En esta columna adicional, estamos usando la propiedad "$index" proporcionado por AngularJS y luego usando el operador +1 para incrementar el índice de cada fila.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute el código en el navegador.

Resultado

Mostrar el índice de la tabla

Desde la salida,

  • Puede ver que se ha creado una columna adicional. En esta columna, podemos ver los índices que se crean para cada fila.

En una pantalla caben tres filas. Un conjunto de datos real no cabe, por lo que los lectores necesitan una forma de buscar en él.

Cómo filtrar y buscar datos de tablas en AngularJS

AngularJS incluye un filtro llamado filterColocado después de ng-repeat, compara cada elemento del array con un valor y conserva solo las filas que coinciden. Al vincular ese valor a un cuadro de texto con ng-model, la tabla se reduce automáticamente mientras el lector escribe, sin necesidad de un controlador de eventos ni de código del controlador.

Agregar una búsqueda en vivo Box

Agrega un campo de entrada encima de la tabla y pasa el array a través del filtro. Ambos comparten la misma propiedad de ámbito, por lo que AngularJS reevalúa la expresión con cada pulsación de tecla.

<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 Explicación:

  1. La entrada escribe lo que se teclea searchText en el alcance.
  2. filter : searchText mantiene filas cuyo Nombre o Description contiene esa subcadena, sin tener en cuenta las mayúsculas y minúsculas.
  3. Para buscar en una sola columna, pase un objeto: filter : {Name : searchText}.
  4. Cadena de filtros, por lo tanto | filter : searchText | orderBy : 'Name' Primero realiza la búsqueda y luego clasifica a los supervivientes.

Mantener las mesas grandes adaptables

Un problema común que se presenta durante el desarrollo con tablas de AngularJS es un conjunto de datos grande que contiene mil filas o más. ng-repetir La directiva crea un ámbito y un observador por fila, por lo que la página puede dejar de responder. En su lugar, distribuya las filas entre páginas y agregue track by De esta forma, las filas existentes se reutilizan en lugar de reconstruirse.

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

Preguntas Frecuentes

ng-repeat necesita una clave única para cada fila. Dos valores idénticos generan el error de duplicados. Agregue una propiedad distinta o escriba track por $index de modo que la posición de la fila se convierte en la clave en lugar de su valor.

Sí. Pasa una matriz de claves, como orderBy: ['Name','DescriptAngularJS ordena según la primera clave y luego resuelve los empates con la segunda. Anteponga un signo menos a una clave para invertir solo esa clave.

Cada fila marcada con ng-repeat expone las variables booleanas $even y $odd. Al vincular una de ellas con ng-class o ng-if, se aplica un color de fondo que produce filas rayadas sin necesidad de ningún selector CSS adicional en la tabla.

Asistentes como Copiloto de GitHub Generan rápidamente el marcado ng-repeat, pero aún así inventan rutas de script y escriben mal los atributos. Verifique cada sugerencia contra el Referencia de filtros de AngularJS antes del envíoping.

Las herramientas de IA reescriben ng-repeat como un bloque de flujo de control y mueven los filtros a tuberías o señales. Porque Angular No tiene función de ordenación ni filtro incorporados; revise manualmente cada ordenación y búsqueda generadas.

Resumir este post con: