Moving angularJS elements created by ng-repeat

Question

I'm trying to move elements that are created by a ng-repeat into some columns. I successfully did it with a directive, but the problem happens when I sort the array of objects on which ng-repeat operates. The directive that searches for the smallest column and then insert the element in it fails to determine the smallest column (maybe because there are still elements in the columns). I believe the structure I use (directives / controllers etc...) isn't optimal, and I cannot find how to organize the angular code to get the behavior I want.

Here is a jsFiddle showing what I have now : http://jsfiddle.net/kytXy/6/ You can see that the items are being inserted correctly inside the columns. If you click on a button that re-arranges the sorting, then they are not inserted again. If you click multiple times on a same button, watch what happens... I put commented alerts that you can uncomment so that you can see how items are being inserted and what is wrong. I've also tried emptying the columns before inserting again (commented js in the jsfiddle), whithout any success.

Here is the code : HTML:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div ng-app="myModule">
    <div ng-controller="Ctrl" >
        <button ng-click="predicate = 'id'; reverse=false; setupColumns()">Sort ID</button>
        <button ng-click="predicate = 'id'; reverse=true; setupColumns()">Sort ID reversed</button>
        <div id="columns" generate-sub-columns post-render>
        </div>
        <div class="elements">
            Elements are stored here !
        <div class="element" ng-repeat="(key,elt) in elts | orderBy:predicate:reverse" id="element{{key}}">
           Text: {{elt.a}}
        </div>
        </div>
    </div>
</div>

JS:

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

myModule.controller('Ctrl', function($scope) {
    $scope.predicate='id';
    $scope.reverse=false;

    $scope.elts = [
        {id:0,a:"Hi man !"},
        {id:1,a:"This is some text"},
        {id:2,a:"Wanted to say hello."},
        {id:3,a:"Hello World!"},
        {id:4,a:"I love potatoes :)"},
        {id:5,a:"Don't know what to say now. Maybe I'll just put some long text"},
        {id:6,a:"Example"},
        {id:7,a:"Example2"},
        {id:8,a:"Example3"},
        {id:9,a:"Example4"},
        {id:10,a:"Example5"},
        {id:11,a:"Example6"}
    ];

    $scope.setupColumns = function() {
        console.log('calling setupColumns');
        var eltIndex = 0;
        var element = jQuery("#element0");
        /*while(element.length > 0) {
            jQuery('#elements').append(element);
            eltIndex++;
            element = jQuery("#element"+eltIndex);
            alert(1);
        }
        alert('Columns should be empty');*/
        element = jQuery("#element0");
        eltIndex = 0;
        var columnCount = 0;
        while (jQuery("#column"+columnCount).size() >0)
            columnCount++;
        while(element.length > 0) {
            console.log('placing new element');
            var smallestColumn = 0;
            var smallestSize = jQuery("#columns").height();
            for (var i = 0; i < columnCount; i++) {
                var columnSize = jQuery(".column#column"+i).height();
                if (columnSize < smallestSize) {
                    smallestColumn = i;
                    smallestSize = columnSize;
                }
            };
            jQuery('.column#column'+smallestColumn).append(element);
            eltIndex++;
            element = jQuery("#element"+eltIndex);
            //alert(1);
        }
        //alert('Columns should be filled');
    };
});

myModule.directive('generateSubColumns', function() {
    return {
        restrict: 'A',
        controller: function() {
            var availableWidth = jQuery("#columns").width();
            var sizePerColumn = 100;
            var nbColumns = Math.floor(availableWidth/sizePerColumn);
            if (nbColumns<=1) 
                nbColumns=1;
            for (var i = 0; i < nbColumns; i++) {
                jQuery('<div class="column" id="column'+i+'">Column '+i+'</div>').appendTo('#columns');
            };
        }
    };
});

myModule.directive('postRender', [ '$timeout', function($timeout) {
    var def = {
        restrict: 'A', 
        terminal: true,
        transclude: true,
        link: function(scope, element, attrs) {
            $timeout(scope.setupColumns, 0);
        }
    };
    return def;
}]);

and some css:

#columns {
    width: 100%;
}

.column {
    width: 100px;
    display:inline-block;
    vertical-align: top;
    border: 1px solid black;
}

.element {
    border: 1px solid red;
}

How can I fix that ? Thanks in advance, hilnius

score 0 · Answer 1 · answered Nov 22 '15 at 18:55

First.. Why you are doing something like this?

var element = jQuery("#element0");

Inside a controller? That kind of code (DOM manipulation) should go inside link function directive and use the $element parameter to access to DOM element.

Also.. What if you use the column-count property to divide your container? https://developer.mozilla.org/es/docs/Web/CSS/column-count

Moving angularJS elements created by ng-repeat

1 Answers1