javascript - 通过 Angular JS 排序和过滤保留砌体效果

Question

请看一下带有 Jquery 砌体布局的 Angular JS 的 fiddle 。我也想使用 Angular 排序和搜索。过渡不是很流畅，砌体布局似乎也没有完全发挥作用。

是否有关于如何实现砌体类型影响并包括带有排序/过滤等的 Angular 建议？ 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);