如何使用角度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