Use variable in ng-style based on other DOM element

Question

I have two tables (.table1 and .table2) that sit side by side in separate DIVs on a page and regardless of content I want the second table rows to match the height of the first table rows so that they align perfectly. The first table is built using ng-repeat based on values from a database, so can height can vary - either way the equivalent row in the second table should always match.

I've been trying many different ideas, but was thinking that using a jQuery selector in the ng-style for table2 rows may work (see below) but it doesn't;

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

or

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

obviously not working, but if I replace the jQuery selector with a specific value it styles the row as expected;

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

I'm not fussed about using jQuery, but am using it elsewhere so no issues with that, but basically I just want to align height of the rows in each table based on the row height of the first table (.table1). So the question is, how do I get the height value of a row in table1 and apply it as the height of the same row in table2 using angular?

If you abstract this out into a function call it should work - i.e. 'height': $scope.getHeight('.table1 tr') and have the return as a string. The jquery will work inside the angular controller. — dmoo, Apr 25 '16 at 20:55
just use css, nth-child selectors. this above is very bad for performance. — z.a., Apr 25 '16 at 20:56
is there a reason why you're trying to get the height of the element in your html instead of setting it to a variable in your controller? So `$scope.row_height = $('.table1 tr:first-child').height()+'px'`. Then just put it in your style attribute `style = "height: {{row_height}}"` — Ahmed Wagdi, Apr 25 '16 at 20:58
@dmoo - thanks, abstracting to a function in the controller was the missing link for me, I should really have spotted that one myself ! I can now get the corresponding row height into ng-style, my only other problem now is that I appear to have another style for row height taking precedence, but think that is just likely down to my lack of ability when it comes to correct CSS ! — jTrouble, Apr 26 '16 at 07:21

score 0 · Accepted Answer · answered Apr 25 '16 at 21:12

You could use jQuery to fetch the size of the other table but you need to go via the controller.

I have it fetching the updated height on click of the green box, but you could equally do it on the render of the table.

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

myApp.controller('MainController', ['$scope', function($scope) {
  $scope.person = {
    firstName: 'Mike',
    lastName: 'Smyth'
  };
  $scope.myStyle = {};
  $scope.findStyle = function(selector){
    $scope.myStyle = {'height': ($(selector).height() + 'px')};
  }
}]);

.person{
  background: green;
  width: 50%;
  float: left;
}
.bigDiv{
  background: blue;
  width: 50%;
  float: left;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<body ng-app="myApp">
    <div ng-controller="MainController">
      <div class="person" ng-style="myStyle" ng-click="findStyle('.bigDiv')">{{person.firstName}} {{person.lastName }}</div>
      <div class="bigDiv"></div>
    </div>
</body>
</html>

Thanks @dmoo, that is pretty much what I was looking for :-) — jTrouble, Apr 26 '16 at 07:31
@jTrouble the event you should probably be using is ng-repeat-finish. see here - http://stackoverflow.com/questions/13471129/ng-repeat-finish-event — dmoo, Apr 26 '16 at 08:05
Thanks again @dmoo, I'll have a look at the link shortly. Just to complete the answer, after a bit of playing around and having trouble getting it to work I finally came up with: `ng-style="myController.getHeight($index)"` in the html and the function getHeight using `var rowH = $('.table1 tbody tr').eq(row).height(); return {"height": rowH + "px"};` — jTrouble, Apr 28 '16 at 07:31

score 0 · Answer 2 · answered Apr 25 '16 at 21:36

The code you have won't work because the template is not rendered fully when you try to get height of row and assign it to height of row in other table. You need to add some watcher inside your controller, which will track when the template is loaded and on next iteration loop through the table 1 rows and assign their heights to table 2 rows.

See this JSFiddle example I made: 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'
    }];
}

Use variable in ng-style based on other DOM element

2 Answers2