Tabla AngularJS: Ordenar, Ordenar por y Filtro en mayúsculas [Ejemplos]

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

Las tablas en HTML se diseñan utilizando la etiqueta HTML

  1. <table> tag – Esta es la etiqueta principal utilizada para mostrar la tabla.
  2. <tr> – Esta etiqueta se utiliza para segregar las filas dentro de la tabla.
  3. <td> – Esta etiqueta se utiliza para mostrar los datos reales de la tabla.
  4. <th> – Esto se utiliza para los datos de encabezado de tabla.

Usando las etiquetas HTML disponibles anteriormente junto con AngularJS, podemos hacer que sea más fácil para rellenar los datos de la tabla. En resumen, la directiva ng-repeat se utiliza para rellenar los datos de la tabla.

Vamos a ver cómo lograr esto durante este capítulo. También veremos cómo podemos usar los filtros orderby y mayúsculas junto con el uso del atributo $index para mostrar índices de tabla angular.

En este tutorial, usted aprenderá –

Rellenar y mostrar datos en una tabla

Como hemos discutido en la introducción de este capítulo, la base para crear la estructura de la 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 <table>,<tr> , <td> y <th>. Sin embargo, los datos se rellenan mediante el uso de la directiva ng-repeat en AngularJS.

Veamos un ejemplo simple de cómo podemos implementar tablas angulares.

En este ejemplo,

Vamos a crear una tabla angular que tendrá temas del curso junto con sus descripciones.

Paso 1) Primero vamos a añadir una etiqueta de “estilo” a nuestra página HTML para que la tabla se pueda mostrar como una tabla adecuada.

  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 angular y
  • En segundo lugar, debería haber relleno puesto en su lugar para nuestros datos de tabla angular.

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

Explicación del código:

  1. Primero estamos creando una variable llamada “tutorial” y asignándole algunos pares clave-valor en un solo paso. Cada par clave-valor se utilizará como datos al mostrar la tabla. La variable tutorial se asigna entonces al objeto scope para que se pueda acceder desde nuestra vista.
  2. Este es el primer paso en la creación de una tabla, y usamos la <table> etiqueta.
  3. Para cada fila de datos, estamos usando la “directiva ng-repeat”. Esta directiva pasa por cada par clave-valor en el tuto, objeto de alcance rial mediante el uso de la variable ptutor.
  4. Por último, estamos utilizando la <td> etiqueta junto con los pares clave-valor (ptutor.Name y ptutor.Description) para mostrar los datos de la tabla angular.

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

Salida:

A partir del producto anterior,

  • Podemos ver que la tabla se muestra correctamente con los datos de la matriz de pares clave-valor definidos en el controlador.
  • Los datos de la tabla se generaron pasando por cada uno de los pares clave-valor mediante el uso de la “directiva ng-repeat”.

Filtro incorporado AngularJS

Es muy común usar los filtros incorporados dentro de 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 una breve recapitulación de los filtros antes de seguir adelante.

En Angular.js filtros se utilizan para dar formato al valor de expresión antes de que se muestre al usuario. Un ejemplo de filtro es el filtro ‘mayúscula’ que toma una salida de cadena y da formato a la cadena y muestra todos los caracteres de la cadena como mayúsculas.

Así que en el siguiente ejemplo, si el valor de la variable ‘TutorialName’ es ‘AngularJS’, la salida de la siguiente expresión será ‘ANGULARJS’.

{{turotialName | uppercase}}

En esta sección, vamos a ver cómo los filtros OrderBy y Mayúsculas se pueden utilizar en tablas con más detalle.

Ordenar tabla con Ordenar por filtro

Este filtro se utiliza para ordenar la tabla en función de una de las columnas de la tabla. En el ejemplo anterior, la salida de nuestros datos de tabla angular apareció como se muestra a continuación.

Controladores Controladores en acción
Modelos Modelos y datos de enlace
Directivas Flexibilidad de las directivas

Veamos un ejemplo, sobre cómo podemos usar el filtro “OrderBy” y ordenar los datos de la tabla angular usando la primera columna de la tabla.

Explicación del código:

  1. Estamos usando el mismo código que hicimos 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 con la tecla “Nombre”.

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

Salida:

De la salida,

  • Podemos ver que los datos de la tabla Angular se han ordenado según los datos de la primera columna. En nuestro conjunto de datos, los datos de “Directivas” provienen de los datos de “Modelos”, pero debido a que aplicamos el filtro OrderBy, las tablas se clasifican en consecuencia.

Mostrar tabla con filtro en mayúsculas

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

Echemos un vistazo a un ejemplo de cómo podemos lograr esto.

Explicación del código:

  1. Estamos usando el mismo código que hicimos para crear nuestra tabla, la única diferencia esta vez es que estamos usando el filtro en mayúsculas. Estamos utilizando este filtro junto con el “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 su código en el navegador.

Salida:

De la salida,

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

Mostrar el índice de tabla ($index)

Para mostrar el índice de tabla, agregue un <td> con $index.

Echemos un vistazo a un ejemplo de cómo podemos lograr esto.

Explicación del código:

  1. Estamos usando el mismo código que hicimos 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 utilizando la propiedad “$index” proporcionada por AngularJS y luego utilizando el operador +1 para aumentar el índice de cada fila.

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

Salida:

De la salida,

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

Resumen:

  • Las estructuras de tabla se crean utilizando las etiquetas estándar disponibles en HTML. Los datos de la tabla se rellenan utilizando la directiva “ng-repeat”.
  • El filtro OrderBy se puede utilizar para ordenar la tabla en función de cualquier columna dentro de la tabla.
  • El filtro en mayúsculas se puede utilizar para mostrar los datos en cualquier columna basada en texto en mayúsculas.
  • La propiedad “$index” se puede utilizar para crear un índice para la tabla.
  • Un problema común encontrado durante el desarrollo con tablas AngularJS.js es la implementación de grandes conjuntos de datos que tienen más de 1000 filas de datos. A veces, la directiva ng-repeat puede volverse insensible, y por lo tanto, toda la página deja de responder a veces. En tal caso, siempre es mejor tener paginación en la que las filas de datos se extienden a través de varias páginas.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *