Regular Table inside ngTable

Question

I got the following html. I cut several columns

<table ng-table="NewIntroCtrl.tableParams" class="table table-striped table-bordered table-hover table-condensed" sortable="true">
        <tr ng-repeat="pilot in $data">
            <td data-title="'Licensee Id'">{{pilot.license}}</td>
            <td data-title="'Licences'">
                <table class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th>Endorsement</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="licence in pilot.licences">
                        <td>{{licence}}</td>
                    </tr>
                    </tbody>
                </table>
            </td>
            <td data-title="'Origin'">{{pilot.origin}}</td>
        </tr>
    </table>

My controller has these tableParams:

self.tableParams = new NgTableParams({
    count: 2
}, {
    dataset: self.newIntroductoryFlight.pilots,
    counts: []
});

It all works except for the fact that my generated table has got an empty column header right of licences. Also the content gets placed wrong from that point on. Can i place tables in ng-table td-elements?

Answer 1

A quick look at the ngTable source code and the ngTable directive suggests this might be possible the function does a jQuery find on TD elements when it is on a row meaning it's not just selecting the direct child but all descendents however there is a option in this function for 'ignore-cell'

angular.forEach(row.find('td'), function(item) {
    var el = angular.element(item);
    if (el.attr('ignore-cell') && 'true' === el.attr('ignore-cell')) {
        return;
    }

The fix

<td data-title="'Licences'">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Endorsement</th>
            </tr>
         </thead>
         <tbody>
             <tr ng-repeat="licence in pilot.licences">
                 <td ignore-cell="true">{{licence}}</td>
             </tr>
          </tbody>
    </table>
</td>

Adding this on fixed the header display issues for me.