0

ページ上の別々の DIV に並んでいる 2 つのテーブル (.table1 と .table2) があり、コンテンツに関係なく、2 番目のテーブル行を最初のテーブル行の高さと一致させて、それらが完全に整列するようにします。最初のテーブルは、データベースの値に基づいて ng-repeat を使用して構築されるため、高さが異なる場合があります。いずれにしても、2 番目のテーブルの同等の行は常に一致する必要があります。

私はさまざまなアイデアを試してきましたが、table2 行の ng スタイルで jQuery セレクターを使用するとうまくいくかもしれないと考えていましたが (以下を参照)、そうではありません。

        <tr ng-style="{'height': $('.table1 tr').eq('$index').height()+'px' }"></tr>

また

        <tr ng-style="{'height': $('.table1 tr:nth-child($index).height()+'px' }"><tr>

明らかに機能していませんが、jQuery セレクターを特定の値に置き換えると、期待どおりに行のスタイルが設定されます。

        <tr ng-style="{'height': 50+'px'}></tr>

私はjQueryの使用に悩まされていませんが、他の場所で使用しているので問題はありませんが、基本的には、最初のテーブル(.table1)の行の高さに基づいて各テーブルの行の高さを揃えたいだけです。問題は、table1 の行の高さの値を取得し、angular を使用して table2 の同じ行の高さとして適用するにはどうすればよいかということです。

4

2 に答える 2

0

行の高さを取得して他のテーブルの行の高さに割り当てようとすると、テンプレートが完全にレンダリングされないため、コードは機能しません。コントローラー内にウォッチャーを追加する必要があります。これは、テンプレートがロードされたときを追跡し、次の反復でテーブル 1 の行をループし、それらの高さをテーブル 2 の行に割り当てます。

私が作成したこの JSFiddle の例を参照してください: http://jsfiddle.net/bpxv80nj/

HTML:

<div ng-controller="MyCtrl">
   <div class="col">
      <table class="table1">
         <tr data-ng-repeat="(i, row) in table1">
            <td>{{i + 1}}</td>
            <td data-ng-bind="row.text"></td>
         </tr>
      </table>
   </div>
   <div class="col">
      <table class="table2">
         <tr data-ng-repeat="(i, row) in table2">
            <td>{{i + 1}}</td>
            <td data-ng-bind="row.text"></td>
         </tr>
      </table>
   </div>
</div>

JS:

var myApp = angular.module('myApp', []);

function MyCtrl($scope, $timeout) {

    $scope.$watch('$viewContentLoaded', function() {
        $timeout(function() {
            $('.table1 tr').each(function() {
                $('.table2 tr').height($(this).height());
            });
        });
    });

    $scope.table1 = [{
        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis sem ut pharetra sagittis. Nam luctus suscipit augue at suscipit. Maecenas quis justo mauris.'
    }];

    $scope.table2 = [{
        text: 'Lorem ipsum dolor sit amet'
    }];
}
于 2016-04-25T21:36:25.517 に答える