如何使用角度js將表格行添加爲模板

Question

我想動態地向表中添加一行。我想在幾張表中重複使用該行。

我試着用指令和ng-include這樣做，但這兩個選項都沒有按照我的預期工作。

基本上，這是我做的：

myapp.directive('myRow', function() { 
    return { 
     restrict : 'E', 
     replace : true, 
     scope : { mytitle : '@mytitle'}, 
     template : '<tr><td class="mystyle">{{mytitle}}</td></tr>' 
    } 
}); 

和HTML：

<table> 
    <tbody> 
     <tr><td>data</td></tr> 
     <my-row></my-row> 
    </tbody> 
</table> 

的<tr>元素被繪製但外面結束DOM中<table>元素。

有沒有簡單的方法來包含使用angularjs的錶行？

Answer 1

您的問題是，由於tbody中存在自定義元素my-row，因此您的html結構無效。你只能有tr在tbody裏面。因此，即使在angular有機會處理它之前，瀏覽器也會將您的指令元素從表中拋出。因此，當angular處理指令時，它會處理表外的元素。

爲了解決這個問題，請將您的指令更改爲受限元素的屬性限制指令。

.directive('myRow', function() { 
    return { 
     restrict : 'A', 
     replace : true, 
     scope : { mytitle : '@mytitle'}, 
     template : '<tr><td class="mystyle">{{mytitle}}<td></tr>' 
    } 

，並用它作爲： -

<table> 
    <tbody> 
     <tr><td>data</td></tr> 
     <tr my-row mytitle="Hello I am Title"></tr> 
    </tbody> 
    </table> 

Plnkr

Answer 2

正確的，如果我錯了，但如果有人想插入兩個或多個行取代目前這種方法行不通行。 以下線程通過用鏈接函數替換tr來解決此問題。

AngularJs while replacing the table row - changing html from compile function but scope is not getting linked