CODEWITHSUNDEEP
javascriptjqueryangularjs
user2200617
user2200617

Reputation: 43

retain masonry effect with Angular JS sorting and filtering

Please take a look at the fiddle which has Angular JS with Jquery masonry layout. I want to use angular sorting and searching as well. The transitions are not very smooth and also the masonry layout does not seem to be fully functional.

Is there a suggestion on how I can achieve a masonry type affect and include angular with sorting/filtering etc. http://jsfiddle.net/rdikshit/AMbF5/embedded/result/

<div ng:app="test">
<div ng-controller="MainCtrl">
    <input type="text" ng-model="nameFilter" /> <a href="#" ng-click="order = 'id'; reverse=!reverse">Order by id</a>
 <a href="#" ng-click="order = 'name';reverse=!reverse">Order by name</a>
 <a href="#" ng-click="order = 'age';reverse=!reverse">Order by age</a>
    <div id="container" masonry>
        <div ng-repeat="item in items | filter: { name: nameFilter } | orderBy: order:reverse" class={{item.style}}> <span>{{item.name}}</span>
            <br /<span>id: {{item.id}}</span>

            <br /> <span>Age: {{item.age}}</span>

            <br /> <span>Style: {{item.style}}</span>

        </div>
    </div>
</div>

Out

If there are any custom directives etc that will help me achieve this easily, please suggest. I tried Passy's directive however when I add the sorting and filtering to it, the masonry layout breaks.

Upvotes: 2

Views: 1684

Answers (1)

Developer Dave
Developer Dave

Reputation: 360

I ran into this exact same problem. I was able to resolve it by setting a watch on the sorting variable(s) and then having masonry reload the items and re-trigger the layout method (on a slight delay) when the sort values were changed. 

$scope.$watch('order', function (newVal, oldVal) {
    if (newVal != oldVal) {
        $timeout(function () {
            $element.masonry('reloadItems');
            $element.masonry('layout');
        }, 300);
    }
}, true);
$scope.$watch('reverse', function (newVal, oldVal) {
    if (newVal != oldVal) {
        $timeout(function () {
            $element.masonry('reloadItems');
            $element.masonry('layout');
        }, 300);
    }
}, true);

Upvotes: 4

Related Questions