Angular.js: Components in table are inserted outside the table

Created on 19 Apr 2016 · 4Comments · Source: angular/angular.js

Do you want to request a _feature_ or report a _bug_?

Bug report.

Steps to reproduce and a minimal demo of the problem

Live demo at: https://plnkr.co/edit/D1CYxP

<body ng-app="test">

  <!-- This should display 10, 20, and 30 on 3 different table rows -->
  <table>
    <tr><th>Column</th></tr>
    <row ng-repeat="i in [1, 2, 3]" idx="i"></row>
  </table>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

  <script type="text/javascript">
    angular.module("test", []).component("row", {
      template: "<tr><td>{{$ctrl.idx * 10}}</td></tr>",
      bindings: { idx: "<" }
    });
  </script>
</body>

Current behavior

The component instances (row) are not inserted inside the table. It looks they attach somewhere outside the table and show:

10 20 30
Column

Expected/desired behavior

10
20
30

Which versions of Angular, and which browser / OS are affected by this issue? Did this work in previous versions of Angular?

Not working on Angular 1.5.5 nor 1.5.4, tested on Chrome/Linux.

won't fix

Source

samueltardieu

👍1

Most helpful comment

Hi Gays, We solved it. You can use grid rather than a table. for the head part of table create div row and inside this div put the many divs with col depend on how many you have. replace the tbody part with new div row and many divs col . each div col has the angular, for example, {{employee.name}}.
For further information, you can ask https://github.com/javaday

HRubaye on 31 Mar 2017

😄4 👎3

All 4 comments

That's because browser only allow very specific elements inside tables (tt, td, thead etc). Everything else is rendered outside the table: http://plnkr.co/edit/S04vyC1HGocaTYdcGENT?p=preview Since angular only compiles elements after the browser has parsed the DOM, the element is already outside the table when it is compiled. There's nothing we can do about this. You should use a directive with an attribute instead.

Narretz on 20 Apr 2016

👎10

if you want incorporate custom tags as <tr> elements you need to set table-row display value on them:

table row {display: table-row;}

mrded on 1 Dec 2016

😄1 👎1 👍1

@mrded That doesn't work. display: table-row; doesn't make the browsers keep the rows inside the table. You would still have to have a custom table element to surround it.

http://plnkr.co/edit/HxUuyPgxsQGh3qZlKY1V?p=preview