AngularJS在Html表上观看

Question

I am new to AngularJS and stuck in one issue.

I have a requirement of fixed Table Header but a scrollable Body. I tried using simple css approach but alignment with header was a problem I am running on.

So I came across Angular Directive, Scrollable Table Directive

Directive

validationApp.directive('fixedHeader', ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        scope: {
            tableHeight: '@'
        },
        link: function ($scope, $elem, $attrs, $ctrl) {
            // wait for content to load into table and the tbody to be visible
            $scope.$watch(function () { return $elem.find("tbody").is(':visible'); },
                function (newValue, oldValue) {
                    alert("visible directive");
                    if (newValue === true) {
                        // reset display styles so column widths are correct when measured below
                        $elem.find('thead, tbody, tfoot').css('display', '');

                        // wrap in $timeout to give table a chance to finish rendering
                        $timeout(function () {

                            // set widths of columns
                            $elem.find('th').each(function (i, thElem) {
                                thElem = $(thElem);
                                var tdElems = $elem.find('tbody tr:first td:nth-child(' + (i + 1) + ')');
                                var tfElems = $elem.find('tfoot tr:first td:nth-child(' + (i + 1) + ')');

                                var columnWidth = tdElems.width();
                                thElem.width(columnWidth);
                                tdElems.width(columnWidth);
                                tfElems.width(columnWidth);
                            });



                            // set css styles on thead and tbody
                            $elem.find('thead, tfoot').css({
                                'display': 'block',
                            });

                            $elem.find('tbody').css({
                                'display': 'block',
                               /* 'height': $scope.tableHeight || '200px',*/
                                'overflow': 'auto'
                            });


                            // reduce width of last column by width of scrollbar
                            var scrollBarWidth = $elem.find('thead').width() - $elem.find('tbody')[0].clientWidth;
                            if (scrollBarWidth > 0) {
                                // for some reason trimming the width by 2px lines everything up better
                                scrollBarWidth -= 2;
                                $elem.find('tbody tr:first td:last-child').each(function (i, elem) {
                                    $(elem).width($(elem).width() - scrollBarWidth);
                                });
                            }
                        });
                    }
                });
        }
    }
}]);

Table

<table id="tableDataOfUsers" width="100%" class="table table-bordered table-hover table-condensed" ng-show="users.length" fixed-header style="border: 1">
        <thead id="tableHeaderOfUsers">
            <tr style="font-weight: bold">
                <th style="width: 30%;"><label ><b>{{ 'load.static.usersetup.NAME_COLUMN_USER_TABLE' | translate }}</b></label></th>
                <th style="width: 30%;"><label ><b>{{ 'load.static.usersetup.EXTENSION_COLUMN_USER_TABLE' | translate }}</b></label></th>
                <th style="width: 30%;"><label><b>{{ 'load.static.usersetup.PROFILENAME' | translate }}</b></label></th>
                <th style="width: 10%;" ng-show="!usrreadonly"><label><b><span ng-show="form.userSetupForm.$visible"></span></b></label></th>
            </tr>
        </thead>
        <tbody id="tableBodyOfUsers">
            <tr ng-repeat="user in users | filter:filterUser" style="height: 35px;">
                <td title="{{ 'load.static.usersetup.USR_AG_TITLE' | translate }}" style="width: 30%;">
                  <!-- editable username (text with validation) -->
                  <span editable-text="user.name" e-form="form.userSetupForm" e-required onbeforesave="checkDuplicateUsers($data, user.id)" ng-readonly="usrreadonly">
                    {{ user.name || '' }}
                  </span>
                </td>

                <td title="{{ 'load.static.usersetup.USR_AGEXTN_TITLE' | translate }}" style="width: 30%;">
                  <!-- editable username (text with validation) -->
                  <span editable-textnumeric="user.extn" e-minlength="1" e-maxlength="4" e-form="form.userSetupForm" onbeforesave="checkDuplicateExtension($data, user.id)" e-required ng-readonly="usrreadonly">
                    {{ user.extn || '' }}
                  </span>
                </td>

                <td title="{{ 'load.static.usersetup.USR_AG_PRO_TITLE' | translate }}" style="width: 30%;">
                  <!-- editable group (select-remote) -->
                   <span editable-select="user.profileid" e-form="form.userSetupForm" onshow="loadProfiles()"  onbeforesave="checkProfile($data, user.profileid)" e-ng-options="g.id as g.name for g in profiles" ng-readonly="usrreadonly">
                    {{ showProfiles(user) }}
                  </span>
                </td>

                <td title="{{ 'load.static.table.TAB_DEL' | translate }}" ng-show="!usrreadonly" style="width: 10%;">
                    <button type="button" ng-show="form.userSetupForm.$visible" ng-click="deleteUser($index)" class="deletebutton" ng-disabled="usrreadonly"></button>
                </td>
            </tr>           
        </tbody>
    </table>

Initially my table displays like this

Now when I click on delete button on any row except first, it deletes correctly without alignment issues, but when I delete first row it then start giving alignment issues and displays like

I knew the issue is with my watch in directive function () { return $elem.find("tbody").is(':visible'); } function () { return $elem.find("tbody").is(':visible'); } it watches only when table initially get visible, so it run only once.

that is why only first row of my table is getting proper width in "px", other rows get the width in "%" ie set on table.

How can I make this table watch every time when I add any row or delete any row. Or how can I make this directive to assign all the rows width in "px".

Answer 1

What you can do is keep another scope variable that holds the number of rows for instance, and pass that to the directive. Watch that, and it will change accordingly.

Add to HTML:

<table fixed-header rows="numberOfRows">...</table>

Controller function that adds a new user:

$scope.addNewUser = function () {
        $scope.data.push({name: $scope.newName, age: $scope.newAge });
        $scope.numberOfRows++;
    }

Change to directive:

scope: {
            tableHeight: '@',
            rows: "="
        },

And the watch:

$scope.$watch(function () { return $scope.rows },

See this Fiddle as a demonstration.