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

Question

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?

You have a typo <tr></tr> it must be </td></tr> You cannot have 2 root elements in the template. Just check your console, you will get all kinds of clues there itself. plnkr.co/edit/pCNbci?p=preview — PSL
– PSL, Commented Oct 9, 2014 at 20:31
That is because browser it throwing it out. you cannot have anything else as a child of tbody. make your directive attribute directive and you should be good to go. Check my demo. — PSL
– PSL, Commented Oct 9, 2014 at 20:33

Community · Accepted Answer · 2016-07-18 08:35:56Z

5

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

edited Jul 18, 2016 at 8:35

CommunityBot

11 silver badge

answered Oct 9, 2014 at 20:38

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

PSL Over a year ago

@chriskelly Please see my answer. I have reworded.

chriskelly Over a year ago

Many thanks! This is a clear explanation and solution.

Community · Accepted Answer · 2017-05-23 11:54:10Z

0

Correct if I am wrong but this approach does not work if someone wants to insert two or more rows replacing the current row. Following thread addresses this issue by replacing the tr withing link function.

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

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 1, 2015 at 4:36

Yogesh Manware

1,8432 gold badges22 silver badges26 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related