Column names not showing when setting columns dynamically about angular-responsive-tables HOT 11 CLOSED

Hi

It is a supported use case adding columns at runtime, with help of ng-repeat. But the code you pasted here don't make use of ng-repeat, it's plain DOM access, and this is not supported.

You can solve this requirement with plain Angular:

<thead>
  <tr>
    <th ng-repeat="column in columnNames">{{column}}</th>
  </tr>
</thead>

from angular-responsive-tables.

Could it be a typo in the template where you have: <th ng-repeat="columnin columnNames">{{column}}</th>?

Other than that, I don't see why it wouldn't work. Can you please provide a plunker?

from angular-responsive-tables.

I don't think that will help. ng-repeat already has a higher priority.

My best guess is that when the ng-repeat runs producing this:

<th>{{column}}</th>
<th>{{column}}</th>

it fails somewhere to retrieve the correct column name during interpolation. Each DOM element should have a separate $scope with a column property by that point. This component takes this text to produce a data-title attribute on each tbody td.

from angular-responsive-tables.

Ok, I tried using plain Angular, but it didn't work either =/... Here's the code:

The directive:

.directive('myTableDirective', ['URL', function(URL){
    return {
        restrict: 'E',
            templateUrl: URL.tableComponent,
            scope: {
                itemList: '=',
                columnNames: '=',
                attributeNames: '='
            },
            controller: 'MyTableController'
        };
    }]);

The template:

<table wt-responsive-table>
            <thead>
                <tr>
                    <th ng-repeat="columnin columnNames">{{column}}</th>
                </tr>
            </thead>
            <tbody ng-show="itemList && itemList.length > 0">
                <tr ng-repeat="itemList in itemList" ng-init="item.checked = false" ng-click="item.checked = !item.checked">
                    <td ng-repeat="attribute in attributeNames">{{item[attribute]}}</td>
                </tr>
            </tbody>
        </table>

The element:

<my-table-directive
        item-list="itemList"
        column-names="['First Name','Last Name']"
        attribute-names="['firstname','lastname']">
    </my-table-directive>

The controller sets

itemList =  [
                {
                    firstname: 'test11',
                    lastname: 'test12'
                },
                {
                    firstname: 'test21',
                    lastname: 'test22'
                }
            ];

The table shows the values correctly at first. Everything ok. The problem is when I size down the screen and the table enters responsive mode. When the table's layout changes, the column names disappear.

from angular-responsive-tables.

I made this one without using directives, but I got the same result: https://embed.plnkr.co/QH65eaSF15yeZkT48XrA/

from angular-responsive-tables.

It may be some scoping issue. If there's some static text around where there's that {{column}}, that static text shows up in responsive mode.

I see nothing that should prevent you from using this solution. One thing you may want to try is creating a directive with a higher precedence than this component (priority > 0) to render each <th> in place before this component has a chance to run.

from angular-responsive-tables.

I tried changing the priority of my directive. I never needed to set the priority of a directive before, so I set 'priority' to 1. It didn't work =/

Should I create another directive that will contain my current one?

from angular-responsive-tables.

I see. Indeed data-title is not being set. I'll try to figure something out. Maybe generating the whole table on runtime.

Thanks!

from angular-responsive-tables.

I worked around it by adding data-title="{{columnNames[$index]}}" to the <td></td>

from angular-responsive-tables.

There's an incompability with the ng-repeat inside a <th>. Usually, the headers will be expanded & linked after this directive has opportunity to run. Ideally, every time the ng-repeat runs, we should reapply the directive binding code.

To work around this limitation, either use static <th>'s or use the data-title attribute as explained above. Interpolation and filters should work just fine.

There's a quick and dirty check that could be applied but still wouldn't solve most dynamic setups. So I'll leave this open for anyone interested in tackling this as an enhancement.

from angular-responsive-tables.

Fix released in v0.2.0. plunker updated: https://embed.plnkr.co/pSoSnRzf0gNMVsH5nFs4/

from angular-responsive-tables.