javascript - Angularjs/jQuery : Change table's width after ajax call finishes.

Question

我有一个表格，其默认宽度是某个值，例如父 div 的 80%。该表最初使用“ng-if”隐藏，直到某个 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 Controller :

$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.
})

正如 Controller 中所解释的，根据从工厂获取的数据，我需要更改表格的宽度。

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

目前，在 ajax 调用完成后编写 jQuery 是行不通的。上面指定的 Controller 的代码:

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

我的猜测是表格还没有完全渲染？好吧，我是在黑暗中拍摄的。我该如何解决这个问题？

Answer 1

My guess is that the table hasn't been rendered completely?

你是对的。使用 ng-if 会使事情变得复杂，请使用 ng-show 或 ng-hide 代替。另外，jQuery 在这里是令人反感的，它与 Angular 一起真正有用的场景并不多。你可以做

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