user2856066 user2856066 - 4 days ago 4
AngularJS Question

Angularjs. ng-switch not working inside a table

Is there anyway I can get ng-switch working inside a table? The table example is not working but the ul exampel 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>

Answer

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