0

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

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

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

我知道我可以用表格样式重写我的表格 div，或者尝试为扩展表格创建一个指令，但似乎需要大量额外的工作才能基本上拥有这个：

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

那么有没有一种替代的、惯用的 Angular 方法来设置 onclick 处理程序而没有所有这些麻烦，或者我只是说' eff it Dude，让我们去打保龄球'，然后在我的 html 中连接一个 onclick。

4

1 回答 1

2

您可以使用 ng-hide（或 ng-show）来进行简单的 hide&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>

普努克

于 2013-03-25T07:42:26.217 回答