插入模板

我有一個模板，看起來像這樣，插入模板

<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腳本可能嗎？

來源

2015-12-05 Peter Boomsma

有辦法來完成你想要達到的效果，例如使用'NG-if'有條件地添加或刪除DOM元素。但是，您在此處發佈的結果不是有效的HTML，並且不會以您期望的方式呈現。 '

'無效，大多數瀏覽器會將表中的

組移到表外，導致它在意外位置呈現。 – Claies

你是正確的代碼不是可行的HTML。你認爲可以添加另一個表格行，然後在td中插入視圖嗎？ –

您可以通過每一行

<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>

ANGULAR

<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>

來源

2015-12-05 23:43:15

回答

相關問題