angular table row component in table component

Question

I have a table component from which I want to create table row components as children.

var documentsController = function () {};

var documentsComponent = {
   template: '<div class="col-lg-12 col-md-12 tableDataContainer">' +
          '  <table class="table">' +
          '    <thead>' +
          '      <tr>' +
          '        <td>Name</td>' +
          '        <td>Document Type</td>' +
          '      </tr>' +
          '    </thead>' +
          '    <tr ng-repeat="document in vm.documents">' +
          '      <document document="document"></document>' +
          '    </tr>' +
          '  </table>' +
          '</div>',
   controller: documentsController,
   controllerAs: 'vm',
   bindings: {
      documents: '<'
   }
};

Here is my table row component:

module.component('documents', documentsComponent);

var documentController = function () {
};

var documentComponent = {
    template:
            '  <td>fl ={{vm.document}}</td>' +
            '  <td>{{document.Name}}</td>',
    controller: documentController,
    replace: true,
    controllerAs: 'vm',
    bindings: {
        document: '<'
    }
};

module.component('document', documentComponent);

The problem is that the markup is not correct. The document is outside of the table:

<div class="col-lg-12 col-md-12 tableDataContainer">  
    <document document="document" class="ng-isolate-scope">
        <tr>
            <td class="ng-binding">fl =</td>  
            <td class="ng-binding"></td>
        </tr>
        </document>
    <table class="table">
        <thead>
            <tr>
                <td>Name</td>
                <td>Document Type</td>      
            </tr>
        </thead>
        <tbody><!-- ngRepeat: document in vm.documents -->
        <tr ng-repeat="document in vm.documents" class="ng-scope">
        </tr>
        <!-- end ngRepeat: document in vm.documents -->  
        </tbody>
        </table>
        </div>

Also the document is not getting passed to the row component and I do not know why.

Does this answer your question? Table row as directive displays out of table context in angularjs — ruffin
– ruffin, Commented Jan 6, 2022 at 15:55

Akos Lukacs · Accepted Answer · 2016-11-08 12:38:50Z

Kind of late answer, but I hope it still helps someone. Because anything not a td or th inside a tr tag is "too" invalid html, and your browser just throws it out.

Try this (no angular or anything that may interfere with the result):

<table>
 <tbody>

  <tr>
   <td>td in row 1</td>
   <div>div in row 1</div>
  </tr>

  <tr>
   <td>td in row 2</td>
   <div>div in row 2</div>
  </tr>

 </tbody>
</table>

The td will appear inside the table as you add rows, but the div will be moved outside (in case of chrome, before) the table by your browser. Even before angular has a chance to parse the html.

As a workaround, you can use a directive with restrict: 'A', and a template like this:

<tr ng-repeat="document in vm.documents" document="document">
</tr>

Collectives™ on Stack Overflow

angular table row component in table component

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related