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.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *