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.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

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/

Compartir
Publicado por
parzibyte
Etiquetas: abreviaciónemmet

Entradas recientes

Imprimir PDF con Bot de Telegram

La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…

9 horas hace

Enviar mensaje con bot de Telegram usando JavaScript (lado del cliente)

Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…

1 día hace

PHP: incrustar imagen en base64

El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…

1 día hace

Plugin ESC POS – Actualización 3.4.0: imprimir HTML

El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…

2 días hace

JavaScript (lado del cliente): leer pixeles de imagen

En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…

1 semana hace

PHP y JavaScript: llenar select con AJAX

Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…

1 semana hace

Esta web usa cookies.