Angularjs ngRepeat table, get height wrong
I am having problem getting the height of the ngRepeat table on page load
I'm trying to get the height when the $ viewContentLoaded event fires, but the table height is equal to the table header row height. My table looks like this:
How do I get the correct table height? Many thanks.
Here is my code:
$scope.$on('$viewContentLoaded', function(){
var elem = angular.element(document.getElementById('ng-repeat-table-test'));
console.log(elem.height());
});
The actual table height as measured by the Chrome developer tool is 234px. However, the above code prints out 100px, which is the height of the title bar.
More Code:
code to display the table:
<table id="ng-repeat-table-test">
<tr id="title">
<td>Car Types</td>
</tr>
<tr class="row" ng-repeat="car in cars">
<td>{{car.name}}</td>
</tr>
</table>
CSS
table{
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
tr#title{
height: 100px;
background-color: #ccc;
}
tr.row{
padding-top: 10px;
border-top: 1px solid #ccc;
}
tr.row:first-child{
border-top: none;
}
tr.row td{
padding-top: 10px;
height: 56px;
vertical-align: top;
}
Small snippet of code on jsfiddle
source to share
$ viewContentLoaded is fired when Angular finishes compiling, which does not mean the browser has provided the DOM.
So, in your case, the problem is that when the $ viewContentLoaded callback is executed, there are no rows colored in the table yet, so you are getting the wrong height.
Try to delay (go to the end of the queue) execution with $ timeout so the DOM can be processed before you get the element's height.
$scope.$on('$viewContentLoaded', function(){
$timeout(function () {
var elem = angular.element(document.getElementById('ng-repeat-table-test'));
console.log(elem.height());
});
});
source to share