web

Creando tabla para AngularJS con Emmet

Introducción

Este es un post muy simple. Sólo muestro cómo crear una tabla HTML que tenga la directiva ng-repeat utilizando Emmet. Así, podemos expandirlo todo.

Abreviación Emmet

La abreviación queda así:

table>(thead>tr>th{Encabezado $}*5)+(tbody>tr[ng-repeat="avio in aviosExistentes track by \$index"]>td{\{\{avio.valor}\}\}*5)

Si analizamos bien, creará una tabla. Dentro de esa tabla, estarán los elementos tbody y thead, dentro de cada uno de ellos habrá filas. Y dentro de cada fila, un valor.

Al expandir la abreviación, da un resultado así:

<table>
    <thead>
        <tr>
            <th>Encabezado 1</th>
            <th>Encabezado 2</th>
            <th>Encabezado 3</th>
            <th>Encabezado 4</th>
            <th>Encabezado 5</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="avio in aviosExistentes track by $index">
            <td>{{avio.valor}}</td>
            <td>{{avio.valor}}</td>
            <td>{{avio.valor}}</td>
            <td>{{avio.valor}}</td>
            <td>{{avio.valor}}</td>
        </tr>
    </tbody>
</table>

Y podemos cambiar el 5 por el número de columnas que deseamos.

Eso es todo por hoy.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.