1

Добрый день.

Имеются две таблицы (тег table). Одна расположена точно под другой. В верхней таблице одна строка. В нижней "икс" строк. Количество столбцов в верхней и нижней таблицах точно совпадает.

Вопрос: как назначить каждому из столбцов верхней таблицы ширину, равную ширине соответствующего столбца нижней таблицы? Загвоздка в том, что я использую Ангуляр. Т.е., конечно, можно пройти по DOM и там попробовать поменять. Но на момент, когда запускается соответствующий кусок кода в скрипте, представление (view) Ангуляра ещё не отобразило данные из модели, и код просто видит пустую таблицу.

2
  • почему не использовать одну таблицу?
    – Grundy
    6 июл 2016 в 6:29
  • возможно потому что нижняя таблица будет скролиться? 6 июл 2016 в 8:27

1 ответ 1

1

Используй ng-init, он запускается после загрузки страницы.

Следующий пример только для одной первой колонки, но принцип понятен.

<div ng-controller="syncCollController" ng-init="init()">
<style>
    td {
        background: lightblue;
    }
</style>
{{name}}
<table>
    <tr>
        <td ng-style="col1Style">head 1</td>
        <td>head 2</td>
        <td>head 3</td>
    </tr>
</table>
<table>
    <tr>
        <td id="col1">Row 1 Col 1</td>
        <td>Row 1 Col 2</td>
        <td>Row 1 Col 3</td>
    </tr>
    <tr>
        <td>Row 2 Col 1</td>
        <td>Row 2 Col 2</td>
        <td>Row 2 Col 3</td>
    </tr>
</table>
</div>

<script>
app.controller('syncCollController', ['$scope', function ($scope) {
    $scope.col1Style = { width: "0px" };

    $scope.init = function () {
        var col1 = angular.element(document.querySelector("#col1"));
        $scope.col1Style = { width: col1.prop("clientWidth") + "px" };
    };
}]);
</script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.