如何使用angular js添加表行作为模板

how to add a table row as a template using angular js

本文关键字：何使用 angular js 添加      更新时间：2023-09-26

我想向表中动态添加一行。我想在几个表中重复使用该行。

我试着用一个指令和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包含表行？

您的问题是，由于tbody中存在自定义元素my-row，因此您的html结构无效。您只能在车身内安装tr。因此，浏览器甚至在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

如果我错了，请更正，但如果有人想插入两行或更多行来替换当前行，则此方法不起作用。下面的线程通过替换链接中的tr函数来解决这个问题。

AngularJs在替换表行时-从编译函数更改html，但作用域未链接

相关文章：