javascript - retain masonry effect with Angular JS sorting and filtering -

javascript - retain masonry effect with Angular JS sorting and filtering -

please take @ fiddle has angular js jquery masonry layout. want utilize angular sorting , searching well. transitions not smooth , masonry layout not seem functional.

is there suggestion on how can accomplish masonry type impact , include angular 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 id</a> <a href="#" ng-click="order = 'name';reverse=!reverse">order name</a> <a href="#" ng-click="order = 'age';reverse=!reverse">order 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 custom directives etc help me accomplish easily, please suggest. tried passy's directive when add together sorting , filtering it, masonry layout breaks.

i ran exact same problem. able resolve setting watch on sorting variable(s) , having masonry reload items , re-trigger layout method (on slight delay) when sort values 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);

javascript jquery angularjs