0

このプランカーは、AngularJSが特定のHTML要素で抱えている問題を示しています（具体的には、テーブル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>

それで、このような面倒なことをせずにonclickハンドラーをセットアップするための、別の慣用的なAngularの方法がありますか、それとも「eff it Dude、let go bowing 」と言って、HTMLにonclickを接続するだけです。

4

1 に答える 1

2

単純なhide＆showブール論理には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

于 2013-03-25T07:42:26.217 に答える