Las tablas son uno de los elementos comunes que se utilizan en HTML cuando se trabaja con páginas web.
Las tablas en HTML se diseñan utilizando la etiqueta HTML
Etiqueta
: esta es la etiqueta principal utilizada para mostrar la tabla.
: esta etiqueta se utiliza para segregar las filas dentro de la tabla.
: esta etiqueta se utiliza para mostrar los datos reales de la tabla.
: se utiliza para los datos del encabezado de la tabla.
Usando las etiquetas HTML disponibles anteriormente junto con AngularJS, podemos facilitar el llenado de datos de la tabla. En resumen, la directiva ng-repeat se usa para completar los datos de la tabla.
Veremos cómo lograr esto durante este capítulo. También veremos cómo podemos usar los filtros orderby y mayúsculas junto con el atributo $ index para mostrar índices de tablas angulares.
En este tutorial, aprenderá:
Rellenar y mostrar datos en una tabla
Filtro integrado de AngularJS
Ordenar tabla con OrderBy Filter
Tabla de visualización con filtro en mayúsculas
Mostrar el índice de la tabla ($ index)
Rellenar y mostrar datos en una tabla
Como comentamos 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 usando las etiquetas HTML normales de
,
,
y
. Sin embargo, los datos se completan utilizando 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á los temas del curso junto con sus descripciones.
Paso 1) Primero vamos a agregar una etiqueta de "estilo" a nuestra página HTML para que la tabla se pueda mostrar como una tabla adecuada.
La etiqueta de estilo se agrega a la página HTML. Esta es la forma estándar de agregar cualquier atributo de formato que sea necesario para los elementos HTML.
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 un relleno para los datos de nuestra tabla angular.
Paso 2) El siguiente paso es escribir el código para generar la tabla y sus datos.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Explicación del código:
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. Luego, la variable del tutorial se asigna al objeto de alcance para que se pueda acceder a él desde nuestra vista.
Este es el primer paso para crear una tabla y usamos la etiqueta
.
Para cada fila de datos, usamos la "directiva ng-repeat". Esta directiva pasa por cada par clave-valor en el objeto de alcance tuto, rial utilizando la variable ptutor.
Finalmente, estamos usando la 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á el siguiente resultado cuando ejecute su código en el navegador.
Producción:
De la salida 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 utilizando la "directiva ng-repeat".
Filtro integrado de 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 un resumen rápido de los filtros antes de continuar.
En Angular.JS, los filtros se utilizan para formatear el valor de la expresión antes de que se muestre al usuario. Un ejemplo de un filtro es el filtro 'mayúsculas' que toma una salida de cadena y formatea la cadena y muestra todos los caracteres en la cadena en mayúsculas.
Entonces, en el siguiente ejemplo, si el valor de la variable 'TutorialName' es 'AngularJS', la salida de la siguiente expresión será 'ANGULARJS'.
{{TurotialName | mayúsculas}}
En esta sección, veremos cómo se pueden usar los filtros orderBy y mayúsculas en las tablas con más detalle.
Ordenar tabla con OrderBy Filter
Este filtro se utiliza para ordenar la tabla según una de las columnas de la tabla. En el ejemplo anterior, la salida de los datos de nuestra tabla angular apareció como se muestra a continuación.
Controladores
Controladores en acción
Modelos
Modelos y datos vinculantes
Directivas
Flexibilidad de 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.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Explicación del código:
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 tecla "Nombre".
Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.
Producción:
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 ordenan en consecuencia.
Tabla de visualización con filtro en mayúsculas
También podemos usar el filtro de mayúsculas para cambiar los datos en la tabla angular a mayúsculas.
Echemos un vistazo a un ejemplo de cómo podemos lograrlo.
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
Explicación del código:
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 usando 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á el siguiente resultado cuando ejecute su código en el navegador.
Producción:
De 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.
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.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Explicación del código:
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" proporcionada por AngularJS y luego usamos el operador +1 para incrementar el índice para cada fila.
Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.
Producción:
De la salida,
Puede ver que se ha creado una columna adicional. En esta columna, podemos ver los índices que se crean para cada fila.
Resumen:
Las estructuras de tabla se crean utilizando las etiquetas estándar disponibles en HTML. Los datos de la tabla se completan mediante la directiva "ng-repeat".
El filtro orderBy se puede utilizar para ordenar la tabla en función de cualquier columna de la tabla.
El filtro de mayúsculas se puede utilizar para mostrar los datos en cualquier columna de texto en mayúsculas.
La propiedad "$ index" se puede utilizar para crear un índice para la tabla.
Un problema común que se encuentra durante el desarrollo con las 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 dejar de responder y, por lo tanto, la página completa deja de responder a veces. En tal caso, siempre es mejor tener una paginación en la que las filas de datos se distribuyan en varias páginas.
