I am working with a div that utilizes ng-repeat to display items.
Initially, I have a few items in an array.
My goal is to ensure that the first item renders before the subsequent items. This is necessary due to the dependency on the height of each div.
Is there a method to achieve this?
<div class='listOne'>
<div ng-repeat='item in listOne'>{{item}}</div>
</div>
<div class='listTwo'>
<div ng-repeat='item in listTwo'>{{item}}</div>
</div>
JS
var myList = ['something', 'stuff', 'someOtherthing'];
var listOne = [];
var listTwo = [];
// determine where to insert the item based on height
function decideListBasedOnHeight() { // returns array
var listOneElement = // reference to listOne element
var listTwoElement = // reference to listTwo element
if (listOneElement.offsetHeight > listTwoElement.offsetHeight )
return listTwo;
return listOne;
}
forEach (myList, function(value) {
decideBasedOnHeight().push(value);
});
Example illustrating the issue: http://plnkr.co/edit/XxJTzNlnQrB7S7tQ0PBL?p=preview Another example: http://plnkr.co/edit/3pzpsgmQ0vIM1e6nuEQG?p=preview