javascript - AngularJS 在 Html Table 上观看

Question

我是 AngularJS 的新手，遇到了一个问题。

我需要固定的表头和可滚动的正文。我尝试使用简单的 css 方法，但与标题对齐是我遇到的问题。

所以我遇到了 Angular 指令， 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>

最初我的表格是这样显示的

现在，当我单击除第一行以外的任何行上的删除按钮时，它会正确删除而不会出现对齐问题，但是当我删除第一行时，它会开始出现对齐问题并显示为

我知道问题出在我的 watch 指令上function () { return $elem.find("tbody").is(':visible'); } 它只在表最初可见时观察，所以它只运行一次。

这就是为什么我的表格只有第一行的宽度以“px”为单位，其他行的宽度以“%”为单位，即在表格中设置。

如何在每次添加任何行或删除任何行时都监视此表。或者我如何使该指令以“px”为单位分配所有行宽。

Answer 1

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

添加到 HTML:

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

添加新用户的 Controller 函数:

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

更改指令:

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

还有 watch :

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

查看此 Fiddle作为示范。