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

我有一个表，其默认宽度是一个特定的值，比如父div的80％。该表最初是隐藏使用 'NG-如果' 直到某个AJAX通话结束如下：Angularjs/jQuery：在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. 
    })

我的猜测是该表尚未完全呈现？那么，我在这里黑暗中拍摄。我如何处理这个问题？

来源

2015-07-12 Tarun Dugar

如果你可以改变一个变量，表示是否这些列应根据数据显示，你可以使用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，你可能只使用一个香草类属性，like so内的表达。

来源

2015-07-12 17:37:28 molgin

我认为这是最好的方法。谢谢。 –

那么，事实证明我是在做jQuery错误。有人在评论中指出了这一点（虽然现在删除）

以前的代码：

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

正确的代码：

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

来源

2015-07-12 17:31:04

是......正好。另一件事你不应该对你的控制器做UI的责任。更好的是，如果在视图内做那个伎俩;） –

谢谢，请记住:) –

问题不在这里，'attr'属性工作：[demo]（https://jsfiddle.net/xp2255r4/） –

我的猜测是表格还没有完全呈现？

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

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

来源

2015-07-12 17:44:19 estus

感谢您的指点！ –

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

回答

相关问题