使用 ng-hide 切换表中的列，其中 colRessize 可调整大小

Toggle columns in a table with colResizable using ng-hide

本文关键字：其中 colRessize 可调整 ng-hide 使用      更新时间：2023-09-26

我创建了一个简单的指令，该指令利用colRessizeable插件，该插件在呈现后简单地激活表上的插件：

app.directive("columnResizable", this.columnResizable = function($timeout) {
    return {
        restrict: "A",
        link: function(scope, element, attrs) {
            // Initialize colResizable plugin after DOM
            $timeout(function() {
                element.colResizable({
                    liveDrag:true,
                    postbackSafe: true,
                    partialRefresh: true,
                    minWidth: 100
                });
            });
        }
    }
});

该指令工作正常，直到我需要添加一个功能来隐藏和显示表中的列。我使用 ng-hide 并通过更改 localStorage 布尔变量来打开或关闭列。如果我从"全部显示"状态开始，列会按预期隐藏/显示。但拒绝显示我是否从隐藏状态开始：

<button class="btn btn-default"
  ng-class="{active: emailHidden}"
  ng-click="emailHidden = !emailHidden">Hide Email</button>
<table column-resizable class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th ng-hide="emailHidden">Email</th>
        </tr>
    </thead>
    <tbody ng-if="!scheduleEntries || scheduleEntries.length == 0">
        <tr>
            <td>Foo Bar</td>
            <td ng-hide="emailHidden">foo@bar.com</td>
        </tr>
    </tbody>
</table>

我创建了一个带有常规布尔变量的 plunker。如果将 $scope.emailHidden 变量更改为"开始隐藏"，则可以看到单击该按钮时不会显示"电子邮件"列：http://plnkr.co/edit/Y20BH2

我最终在指令中为 emailHidden 变量添加了一个观察程序，一旦更改，它就会重置列宽并重新初始化 colRessize 插件：

scope.$watch('emailHidden', function(newVal) {
  element.find('th').css('width','auto');
    $timeout(function() {
        element.colResizable({
            liveDrag:true,
            postbackSafe: true,
            partialRefresh: true,
            minWidth: 100
        });
    });
});

更新的普伦克

如果有人有更好的方法来解决这个问题，我将不胜感激。最好是不涉及$watch

当$scope.emailHidden值设置为 true 时，ColResizer 将第二列的宽度更新为零。即使在 emailHidden 标志设置为 false 之后，此宽度也不会更新。由于在这种情况下第二列没有任何宽度，因此我们无法在屏幕上看到它。

相关文章：