Question

这个plunkr说明了AngularJS对某些HTML元素的问题（特别是表格：gist - 这就是为什么ui.bootstrap.collapse不能用于表格的原因）

正如您从plunkr中看到的，我可以隐藏和删除静态行，但通过ng-repeat生成的行不起作用。使用ng-transclude也不能解决问题，因为浏览器会重新排序节点，或者删除没有正确根元素的节点。

我想要做的核心是在表格中创建可扩展的行。每个扩展都是一个相当复杂的表结构，其中包括嵌套的`ng-repeats

我知道我可以用表格样式重写我的表格div，或者尝试为扩展表创建一个指令，但它似乎是 ton 的额外工作只是基本上有这个：

<tr onclick="$('#exp').toggle()">
  <td>1</td>
</tr>
<tr id='exp'>
   <td>2</td>
</tr>

那么有没有一种替代的，惯用的Angular方式来设置onclick处理程序而没有这么麻烦，或者我只是说'eff it Dude, lets go bowling,'并且只是在我的html中连接onclick。

Answer 1

您可以使用ng-hide（或ng-show）进行简单的隐藏和显示布尔逻辑。要在“点击”行上应用自定义类，您可以使用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>

Plnuker

在指令之外的AngularJS中操作DOM？

1 个答案: