CODEWITHSUNDEEP
javascriptangularjs
SoluableNonagon
SoluableNonagon

Reputation: 11755

AngularJS - force render / rerender / compile a ng-repeated div inside directive

I have a div which uses ng-repeat.

I start with a few items in an array.

I would like to force the first item to render before the next item is rendered. The reason for this is because of the dependency on height of each div

Is there a way to do that?

<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 = [];

// decide which list to insert into
function decideListBasedOnHeight() { // returns array
    var listOneElement = // reference to listOne element
    var listTwoElement = // reference to listTwo element
    if (listOneElement.offsetHeight > listTwoElement.offsetHeight ) // the height here is zero for both
       return listTwo;
    return listOne;
}

forEach (myList, function(value) {
    decideBasedOnHeight().push(value);
});

Example of problem: http://plnkr.co/edit/XxJTzNlnQrB7S7tQ0PBL?p=preview Second example: http://plnkr.co/edit/3pzpsgmQ0vIM1e6nuEQG?p=preview

Upvotes: 1

Views: 2489

Answers (1)

gorpacrate
gorpacrate

Reputation: 5571

Mmm, nice question.

You could not forEach an array but push it step by step via directive. See

<div ng-contoller="ctrl">
    <div class='listOne'>
        <div ng-repeat='item in listOne' count-height-and-push-next="listOneHeight">{{item}}</div>
    </div>
    <div class='listTwo'>
        <div ng-repeat='item in listTwo' count-height-and-push-next="listTwoHeight">{{item}}</div>
    </div>
</div>

.directive('countHeightAndPushNext', function(){
   return{
       restrict: 'A',
       scope: true,
       link: function(scope, element, attrs){
           scope[attrs.countHeightAndPushNext] += element[0].outerHeigth;
           scope.pushItem();
       }
   };

})

.controller('ctrl', function($scope){
    $scope.myList = ['something', 'stuff', 'someOtherthing'];
    $scope.listOne = [];
    $scope.listOneHeight = 0;
    $scope.listTwo = [];
    $scope.listTwoHeight = 0;

    var nextPushIndex = 0;
    $scope.pushItem = function(){
        if($scope.listOneHeight > $scope.listTwoHeight){
             $scope.listTwo.push($scope.myList[nextPushIndex])
        }else{
             $scope.listOne.push($scope.myList[nextPushIndex]);
        }
        nextPushIndex++;
    };
    $scope.pushItem();
});

I really don't like tight coupling in this example and it absolutely needs to be refactored and remastered, but that's just an idea. Probably not the best one, but it should work. Cheers.

Upvotes: 1

Related Questions