Question

我是AngularJS的新手并且陷入了一个问题。

我需要固定的表头但是可滚动的主体。我尝试使用简单的css方法但是与标题对齐是我正在运行的问题。

所以我遇到了Angular Directive， Scrollable Table 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 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>

最初我的桌子显示如下 Initally Table displays like this

现在当我点击除第一行之外的任何行上的删除按钮时，它会在没有对齐问题的情况下正确删除，但是当我删除第一行时它会开始给出对齐问题并显示如

Table display only after deleting first row

我知道问题出在我的手表上 function () { return $elem.find("tbody").is(':visible'); }它仅在表最初可见时才会监视，因此它只运行一次。

这就是为什么只有我的表的第一行在＆＃34; px＆＃34;中获得适当的宽度，其他行的宽度为＆＃34;％＆＃34;即设置在桌子上。

每次添加任何行或删除任何行时，如何制作此表。或者我如何使这个指令在＆＃34; px＆＃34;。

中分配所有行宽

Answer 1

您可以做的是保留另一个包含行数的范围变量，并将其传递给指令。观察它，它会相应地改变。

添加到HTML：

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

添加新用户的控制器功能：

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

更改为指令：

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

手表：

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

请参阅此Fiddle作为演示。

AngularJS在Html表上观看

1 个答案: