Angularjs/jQuery: изменить ширину таблицы после завершения вызова ajax.

Question

У меня есть таблица, ширина по умолчанию которой является определенным значением, скажем, 80% родительского div. Таблица изначально скрыты с помощью 'нг-если' до определенного АЯКС вызова не закончена следующим образом:

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 столбца таблицы не отображаются в соответствии со значениями в извлеченных данных, и поэтому, если эти столбцы не показаны, мне необходимо уменьшить ширину таблицы.

В настоящее время запись jQuery после завершения вызова ajax не работает. Код для контроллера, указанный выше:

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

Я полагаю, что таблица не была полностью отображена? Ну, я стреляю в темноту здесь. Как мне подойти к этой проблеме?

Answer 1

Если вы можете изменить переменную, указывающий эти столбцы должны отображаться на основе данных, вы можете использовать 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.

Answer 2

Ну, оказывается, я неправильно делал jQuery. Кто-то указал на это в комментариях (удален сейчас, хотя)

Предыдущий код:

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

Правильный код:

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

Answer 3

Мое предположение, что таблица не была визуализирована полностью?

Вы правы. Использование ng-if усложнит ситуацию, вместо этого используйте ng-show или ng-hide. Кроме того, jQuery здесь неприемлемо, сценариев не так много, когда они действительно полезны для Angular.Вы можете сделать:

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