Angularjs/jQuery: ajax调用结束后改变表格的宽度

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

本文关键字：表格 改变 结束 jQuery ajax 调用 Angularjs      更新时间：2023-09-26

我有一个表，其默认宽度是一定的值，说父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控制器:

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

我的猜测是表还没有完全渲染?我是瞎猜的。我该如何处理这个问题?

我的猜测是表还没有完全渲染?

你是对的。用ng-if会使事情复杂化，用ng-show或ng-hide代替。此外，jQuery在这里也不受欢迎，它在Angular中真正有用的场景并不多。你可以做

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

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

例如，给自己这些CSS类:

.wide-table {
    width: 80%;
}
.narrow-table {
     width: 100px;
}

然后在视图中，像这样:

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

给你一把小提琴。

更新:因为你使用的是ng-if，你可能只是在一个香草类属性中使用一个表达式，就像这样。

好吧，原来我做错了jQuery。有人在评论中指出了这一点(虽然现在删除了)

之前代码:

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

正确代码:

$('#table-stable').css('width', '100px');
相关文章：