我有一个看起来像这样的模板,
<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,这样的事情是可能的吗?
答案 0 :(得分: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>