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:

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?

score 6 · Answer 1 · answered Jul 07 '12 at 14:18

6

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.

answered Jul 07 '12 at 14:18

Andrew Joslin

43,033
21
100
75

1

An `if` statement... how useful & elegant. Thank you very much. – The Who Jul 09 '12 at 19:15
Thank you for great tip about `ngm-if`. Love it. – Dmitry Evseev Oct 16 '12 at 13:26
Why is your JavaScript code, i.e. the Controller, an anonymous function? I am not disputing it, but want to learn. – Kevin Meredith Jun 25 '13 at 04:25

score 1 · Accepted Answer · answered Apr 25 '15 at 07:49

Answering question using more recent version of Angular.

As Andrew Joslin wrote, the ng-show hides the element (it applies display: none). ng-switch removes non-matching elements instead of just hiding them. But it also requires extra element for switch-when expression.

Since the last answer, the ng-if has become a part of Angular, you no longer need an external library.

(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>

Creating tables with Angular.js

2 Answers2

Linked