Creating tables with Angular.js

Question

I am trying to create a table with Angular.js which will have cell's spanning many rows.

Example:

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

Example data

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

Expected output

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

I have it working by using the ng-show directive. But that still renders an extra cell, just hidden. It would be ideal to have the table properly rendered.

ng-switch, as mentioned, won't work in certain elements with strict parsing (ie: a table which only allows certain tags)

Any advice?

Answer 1

Normally you could use ng-switch for something like this, which conditionally adds/removes things from the DOM, unlike ng-show/ng-hide which just hide/show things.

But ng-switch doesn't play nice with tables because it requires an extra element for the switch statement.

Luckily, someone made a directive called 'if' which just takes one attribute on an element and conditionally adds/removes it from the DOM. It's genius :-).

Here's an example of it (look in the 'Resources' panel on the side, I included it from github). http://jsfiddle.net/5zZ7e/.

I also showed how you can make your controllers without global variables in there.