chriskelly chriskelly - 4 months ago 16
HTML Question

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

I would like to add a row dynamically to a table. I would like to reuse the row in a few tables.

I tried doing this with a directive and by using

ng-include
but neither option worked as I expected.

Basically, this is what I did:

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


and in html:

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


The
<tr>
element gets drawn but ends up outside the
<table>
element in the dom.

Is there a simple way to include table rows using angularjs?

PSL PSL
Answer

Your issue is that you have invalid html structure because of the presence of the custom element my-row inside tbody. You can only have tr inside tbody. So the browser is throwing your directive element out of the table even before angular has a chance to process it.So when angular processes the directive, it processes the element outside the table.

In order to fix this, change your directive to be attribute restricted directive from element restricted.

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

and use it as:-

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

Plnkr

Comments