Angularjs. ng-switch not working inside a table

Question

Is there anyway I can get ng-switch working inside a table? The table example is not working but the ul example just work fine. The problem is that I really need the table example. I am using angular 1.07.

<table>
  <tbody ng-repeat="item in items">

  <tr><td>{{ item.heading }}</td></tr>

  <tr ng-repeat="row in item.fields" ng-switch on="row.nb">

  <div ng-switch-when="01">
    <td>{{ row.nb }}</td>
  </div>

  </tr>

  </tbody>

</table>

<ul ng-repeat="item in items">
  <li ng-repeat="row in item.fields" ng-switch on="row.nb">

  <div ng-switch-when="01">
    {{ row.nb }}
  </div>

  </li>
</ul>

Ranger

Answer 1

You need to move the ng-switch-when to the td otherwise it will ignore it as invalid because a div is not valid markup inside a tr. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr

Remove the div and change it to:

 <td ng-switch-when="01">{{ row.nb }}</td>

Demo: http://plnkr.co/edit/yHkBGekjgGDts8pNtekJ?p=preview

Fluorene

Thanks for your answer. My example was simplified. In the real code I have several TD:s. Maybe I could replace the TD:s with a new table - but I suppose the cells in the tables then would not align properly to other tables. Anyway, I was so lucky that only one TD changes depending on the parameter (row.nb) so your solution works fine for me. Thanks a lot. – Ranger

Tables can become cumbersome. You might consider using grids (bootstrap) but it all depends on your requirements. – Fluorene

Thats also a good idea. I am already using twitter bootstrap so thats very much a possibility. Strange that I newer have considered that and with that solution I will get rid of the several tbodys that creates in the ng-repeat. Thanks, I will evaluate both solutions. – Ranger