Creando tablas con Angular.js

Question

Estoy intentando crear una tabla con Angular.js que tendrá celdas que abarcan muchas filas.

Ejemplo:

http://jsfiddle.net/famedriver/kDrc6/

Datos de ejemplo

var data = [{Colors: ["red","green","blue"]}] 

Resultados previstos

<table> 
    <tr> 
    <td rowspan="3">Colors</td> 
    <td>red</td> 
    </tr> 
    <tr> 
    <td>green</td> 
    </tr> 
    <tr> 
    <td>blue</td> 
    </tr> 
</table> 

tengo que trabajar utilizando la directiva ng-show. Pero eso todavía representa una celda extra, simplemente oculta. Sería ideal tener la tabla correctamente renderizada.

ng-switch, como se ha mencionado, no va a funcionar en ciertos elementos con un estricto análisis (es decir: una mesa que sólo permite ciertas etiquetas)

Algún consejo?

Answer 1

Pregunta de respuesta utilizando la versión más reciente de Angular.

Como escribió Andrew Joslin, el ng-show oculta el elemento (se aplica display: none). ng-switch elimina los elementos que no coinciden en lugar de simplemente ocultarlos. Pero también requiere un elemento adicional para la expresión switch-when.

Desde la última respuesta, el ng-if se ha convertido en una parte de Angular, ya no necesita una biblioteca externa.

(function(win) { 
 
    angular.module('myApp', []) 
 
    .controller("Tester", function($scope) { 
 
     $scope.data = { 
 
     Colors: ["red", "green", "blue"] 
 
     } 
 
    }) 
 
}(window));

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <h1>old code converted</h1> 
 
    <p>Just converted to a newer AngularJS.</p> 
 
    <table border="1" ng-controller="Tester"> 
 
    <tbody ng-repeat='(what,items) in data'> 
 
     <tr ng-repeat='item in items'> 
 
     <td rowspan="{{items.length}}" ng-show="$first">{{what}}</td> 
 
     <td>{{item}}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <h1>solution via ng-if</h1> 
 
    <table border="1" ng-controller="Tester"> 
 
    <tbody ng-repeat='(what,items) in data'> 
 
     <tr ng-repeat='item in items'> 
 
     <td rowspan="{{items.length}}" ng-if="$first">{{what}}</td> 
 
     <td>{{item}}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 2

Normalmente se puede utilizar ng-switch para algo como esto, lo que añade condicionalmente/elimina las cosas desde el DOM, a diferencia ng-show/ng de piel que acaba de ocultar/mostrar las cosas.

Pero el ng-switch no funciona bien con las tablas porque requiere un elemento adicional para la declaración del conmutador.

Afortunadamente, alguien hizo una directiva llamada 'if' que solo toma un atributo de un elemento y lo agrega/elimina condicionalmente del DOM. Es genio :-).

Aquí hay un ejemplo (vea el panel 'Recursos' en el lateral, lo incluí de github). http://jsfiddle.net/5zZ7e/.

También le mostré cómo puede hacer que sus controladores sin variables globales estén ahí.