在元素

Question

我有一个看起来像这样的模板，

<table>
  <tr "ng-repeat" => "row in moviesRows">
    <td "ng-repeat" => "movie in row>
      {{ movie.title }}
    </td>
  </tr>
</table>

这会创建一个像这样的html结构，

<table>
  <tr>
    <td>Hello</td>
    <td>Hello</td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td>Hello</td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td>Hello</td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
<table>

我的目标是当用户点击TD元素时，在该行的末尾插入模板。导致这样的事情，

<table>
  <tr>
    <td>Hello</td>
    <td>Hello</td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td>Hello</td>
    <td>Hello</td> < TD clicked
    <td>Hello</td>
  </tr>
  <tr class="container_template>
    <td ui-view="something">Template info etc.</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td>Hello</td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
<table>

使用angularJS甚至是Javascript，这样的事情是可能的吗？

Answer 1

你可以通过在每一行之后添加这段代码来实现它

<tr class="container_template>
  <td ui-view="something">Template info etc.</td>
</tr>

并使用ngShow使其可见或不可见。

<table>
  <tr>
    <td>Hello</td>
    <td>Hello</td>
    <td ngclick="models[0] = !models[0]">Hello</td>
    <td>Hello</td>
  </tr>
  <tr class="container_template ngshow="models[0]">
    <td ui-view="something">Template info etc.</td>
  </tr>  
  <tr>
    <td>Hello</td>
    <td>Hello</td>
    <td ngclick="models[1] = !models[1]">Hello</td>
    <td>Hello</td>
  </tr>
  <tr class="container_template ngshow="models[1]">
    <td ui-view="something">Template info etc.</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td>Hello</td>
    <td ngclick="models[2] = !models[2]">Hello</td>
    <td>Hello</td>
  </tr>
  <tr class="container_template ngshow="models[2]">
    <td ui-view="something">Template info etc.</td>
  </tr>
<table>

<强>角

<table>
  <tr ng-repeat-start="row in moviesRows">
    <td ng-repeat="movie in row" ng-click"models[row.$index] = !models[row.$index]">
      {{ movie.title }}
    </td>
  </tr>
  <tr class="container_template ng-show="models[row.$index]" ng-repeat-end>
    <td ui-view="something">Template info etc.</td>
  </tr>   
</table>