SBO SBO - 5 months ago 415
AngularJS Question

AngularJS: set same height for divs in ng-repeat

I'm an AngularJS newbie developing an app in phonegap using Angular + Angular Mobile UI.

I have a list of divs in my template file inside Bootstrap columns WITHOUT USING jQuery. I need to square divs applying an height responsive to their width in Bootstrap columns. It should be a really simple script but I can't handle.

Here is my template:

template.html

<div ng-controller="ControllerIndex as Ctrl" item-list>
<div ng-repeat="item in items" >
<div class="col-xs-4 object-list-container">
<div class="object-list" >
<p ng-bind-html="item.name"></p>
</div>
</div>
</div>
</div>


Here's my controller:

angular.module('app').controller('ControllerIndex', function ($scope, $http, $element) {
$scope.items =[];

$http.get(baseUrl +'data/item.json').success(function(data){
$scope.items = data.item;
}).error(function(){
commonError();
});


});

and here my directive:

angular.module('app').directive('itemList', function($timeout){
return {
link: function ($scope, $element, $attrs) {
//I tried a lot of things
$timeout(function(){
var elements = document.getElementsByClassName("object-list");
console.log(elements); //Gives an array of 2
var elementsLenght = elements.length;
console.log(elementsLenght); //Gives 0!!!!!!
});

//Get the max height and set to the other div, but i can't enter this cycle
for (var i = 0; i < elementsLenght; i++) {
var elementHeight = elements[i].offsetHeight;
//console.log(elementHeight);
if (elements[i].offsetHeight > maxHeight) {
maxHeight = elementHeight;
}
}


//Attempt number 2
var angularElement = angular.element($element);
var elementObject = angular.element($element[0].querySelector('.object-list'));
console.log(elementObject); //Gives a T object with lenght 0
var xx = angular.element(elementObject[0]);
console.log(xx.offsetHeight);
console.log('elementObject: ', angular.element(elementObject[0])); //Gives html


}
}
});


I think i'm missing something. Thank you!

Answer

You could make your directive to be part of ng-repeat and detect when the ng-repeat finishes loading, and in that directive, once you detect that the last one has finished loading, do your first attempted solution.

template:

<div ng-controller="ControllerIndex as Ctrl">    
    <div ng-repeat="item in items" item-list>
        <div class="col-xs-4 object-list-container">
            <div class="object-list" >
                <p ng-bind-html="item.name"></p>
            </div>
        </div>
    </div>    
</div>

Directive:

angular.module('app').directive('itemList', function($timeout){
    return {
        link: function ($scope, $element, $attrs) {
             if (scope.$last){
                 var elements = document.getElementsByClassName("object-list");
                 var maxHeight = 0;
                 //Get the max height and set to the other div
                 $timeout(function(){
                    for (var i = 0; i < elements.length; i++) {
                       var elementHeight = elements[i].offsetHeight;
                       //console.log(elementHeight);
                       if (elements[i].offsetHeight > maxHeight) {
                           maxHeight = elementHeight;
                       }
                    }    
                 });
             }
        }
    }
});