This plunkr illustrates an issue AngularJS has with certain HTML elements (specifically table re: gist--this is why ui.bootstrap.collapse doesn't work with tables either)
As you can see from the plunkr, I can hide and remove static rows fine, but generated rows, via ng-repeat do not work. Using ng-transclude doesn't address the issue either, as the browser will reorder nodes, or drop nodes that don't have proper root elements.
The core of what I'd like to do is create expandable rows in a table. Each expansion is a fairly complex table structure, which includes nested `ng-repeats
I'm aware I could rewrite my tables div's with tables styling, or attempt to create a directive for the expansion table, but it seems like a ton of extra work just to essentially have this:
<tr onclick="$('#exp').toggle()">
<td>1</td>
</tr>
<tr id='exp'>
<td>2</td>
</tr>
So is there an alternative, idiomatic Angular way to setup onclick handlers without all this hassle, or do I just say 'eff it Dude, lets go bowling,' and just wire up an onclick in my html.
You may use ng-hide (or ng-show) for simple hide&show boolean logic. And for applying custom class on "clicked on" rows you may use ng-class:
<table>
<tr ng-click='hideRow2 = !hideRow2' ng-class="{active: !hideRow2}">
<td>1</td>
</tr>
<tr ng-hide="hideRow2">
<td>2</td>
</tr>
<tr ng-click='hideRow4 = !hideRow4' ng-class="{false: 'active', true: 'default'}[hideRow4]">
<td>3</td>
</tr>
<tr ng-hide="hideRow4">
<td ng-repeat='e in els'>{{e}}</td>
</tr>
</table>