Question

我有一个表，其默认宽度是一个特定值，比如父div的80％。该表最初是使用＆nbsp; ng-if＆＃39;直到某个ajax呼叫完成如下：

HTML：

<div ng-if="!loading">
    <table id="table-stable">
        <thead>
            //columns
        </thead>
        <tbody>
            <tr ng-repeat="data in tableData">
                //rows
            </tr>
        </tbody>
    </table>
</div>

AngularJS控制器：

$scope.loading = true;
someFactory.getData().then(function(data) {
    $scope.loading = false;
    $scope.tableData = data;
    //now need to write code to change table's width dependant on data.
})

如控制器中所述，根据从工厂提取的数据，我需要更改表格的宽度。

根据提取的数据中的值，没有显示表的2列，因此，如果没有显示那些列，那么我需要缩小表的宽度。

目前，在ajax调用完成后编写jQuery是不行的。上面指定的控制器代码：

$scope.loading = true;
    someFactory.getData().then(function(data) {
        $scope.loading = false;
        $scope.tableData = data;
        $('#table-stable').attr('width', '100px'); //not working.
    })

我的猜测是桌子还没有完全呈现？好吧，我在这里黑暗中拍摄。我该如何处理这个问题？

Answer 1

我的猜测是桌子还没有完全渲染？

你是对的。使用ng-if会使事情变得复杂，请改用ng-show或ng-hide。此外，jQuery在这里是令人反感的，当它对Angular非常有用时，没有太多场景。你可以做到

<div ng-show="!loading">
    <table id="table-stable" ng-style="lengthyTable && { width: '100px' }">
    ...

Answer 2

如果您可以更改指示是否应根据数据显示这些列的变量，则可以使用ng-class，您的元素类将实时更新。

例如，给自己这些CSS类：

.wide-table {
    width: 80%;
}

.narrow-table {
     width: 100px;
}

然后在视图中，例如：

<table id="table-stable" ng-class="{'narrow-table': columnsHidden, 'wide-table': !columnsHidden}">

这里是fiddle。

更新：由于您正在使用ng-if，因此您可能只使用vanilla类属性like so中的表达式。

Answer 3

好吧，事实证明我做错了jQuery。有人在评论中指出了这一点（尽管现已删除）

上一个代码：

$('#table-stable').attr('width', '100px');

正确的代码：

$('#table-stable').css('width', '100px');

Angularjs / jQuery：在ajax调用完成后更改表的宽度。

3 个答案: