通過Angular JS排序和過濾保留砌體效果

Question

請看看具有Jquery砌體佈局的Angular JS的小提琴。我想要使​​用角度排序和搜索。 過渡不是很順利，砌體佈局似乎也不完全正常。

是否有關於如何可以實現一個砌體型影響，並且包括角度與排序/過濾等 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> 

出一個建議

如果有任何自定義指令等即會幫我輕鬆實現這一點，請建議。我嘗試過Passy的指令，但是當我添加排序和篩選時，砌體佈局中斷。

Answer 1

我遇到了這個完全相同的問題。我能夠通過在排序變量上設置一個監視來解決它，然後在排序值發生變化時使砌體重新加載項目並重新觸發佈局方法（稍微延遲）。

$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);