CODEWITHSUNDEEP
angularjs
dagda1
dagda1

Reputation: 28910

angular table row component in table component

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.

Upvotes: 3

Views: 3099

Answers (1)

Akos Lukacs
Akos Lukacs

Reputation: 2047

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>

Upvotes: 6

Related Questions