テーブルの行間にdivを挿入し、クリック時にトグルする方法は？

Question

divを表の行の中に配置し、ボタンを使用して表示を切り替えるにはどうすればよいですか。

私はAngularjs NGリピートに

<tr ng-repeat="result in results" > 
    <td>{{$index + 1}}</td> 
    <td>{{result.canname}}</td> 
    <td>{{result.canbloodgroup}}</td> 
    <td>{{result.cangender}}</td> 
    <td>Button</td> 
</tr> 

を使用してテーブルの行を作成しています私はこれを行うことができますどのように、各行の間にテーブル幅のdiv要素を入れたいですか？

Answer 1

<table ng-repeat="result in results"> 
<tr> 
    <td>{{$index + 1}}</td> 
    <td>{{result.canname}}</td> 
    <td>{{result.canbloodgroup}}</td> 
    <td>{{result.cangender}}</td> 
    <td>Button</td> 
</tr> 
<tr ng-if="true/false"> 
    <td colspan=4> 
    <div> 
     <p>{{things-you wnat to show}}</p> 
    </div> 
    </td> 
</tr> 
</table> 

さてあなたは、行の間でのdivを置くことはできませんが、多分それはあなたの要件を気力ます行 などのdivでsperateテーブルを作成することができます。おかげ

Answer 2

コメントで述べたように、いくつかのテーブル要素のみを許可し、特定の子どもタグ

あなたはそれはあなたが

をしたいです何に表示動作を調整 <tbody>を繰り返し、各

<tbody ng-repeat="result in results"> 
    <tr ng-if="someVariable"> 
    <td colspan="5">Your other content</td> 
    </tr> 
    <tr> 
    <td>{{$index + 1}}</td> 
    <td>{{result.canname}}</td> 
    <td>{{result.canbloodgroup}}</td> 
    <td>{{result.cangender}}</td> 
    <td ng-click="someVariable = ! someVariable">Button</td> 
    </tr> 
</tbody> 

に2行を持つことができます