保持与角JS排序和过滤效果砌筑 [英] retain masonry effect with Angular JS sorting and filtering

问题描述

请看看里面有角JS与jQuery砖石布局小提琴。我想用角排序和搜索也是如此。
该转换是不是很顺利，也是砖石布局似乎并没有充分发挥作用。

有我如何能实现一个砖石类型影响，包括带角度排序/过滤等建议
http://jsfiddle.net/rdikshit/AMbF5/embedded/result/

 ＆LT; D​​IV NG：程序=测试＆GT;
＆LT; D​​IV NG控制器=MainCtrl＆GT;
    ＆LT;输入类型=文本NG模型=nameFilter/＆GT; ＆LT; A HREF =＃NG点击=为了='ID';！反向扭转=＆GT;通过ID＆LT秩序; / A＆GT;
 ＆LT; A HREF =＃NG点击=为了='名字';反向=反转！＆GT;的名字＆LT秩序; / A＆GT;
 ＆LT; A HREF =＃NG点击=为了='年龄';！反向扭转=＆GT;按年龄和LT秩序; / A＆GT;
    ＆LT; D​​IV ID =容器砖石＆GT;
        ＆LT; D​​IV NG重复=项中的项目|过滤器：{名称：nameFilter} |排序依据：顺序：反向类= {{item.style}}＆GT; ＆LT;跨度＆GT; {{item.name}}＆LT; / SPAN＆GT;
            ＆LT; BR /＆LT;跨度＆GT; ID：{{item.id}}＆LT; / SPAN＆GT;            ＆LT; BR /＆GT; ＆LT;跨度＆GT;年龄：{{item.age}}＆LT; / SPAN＆GT;            ＆LT; BR /＆GT; ＆LT;跨度＆GT;风格：{{item.style}}＆LT; / SPAN＆GT;        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

输出

如果有任何自定义指令等，这将帮助我轻松地实现这一点，请建议。我试图帕西的指令，但是当我的排序和过滤添加到它，砖石布局休息。

解决方案

我碰到了这个相同的问题。我可以通过排序变量（S）设置的手表，然后有砖石重新加载项和重新触发布局方法（上稍有延迟），当排序值改为解决。

  $范围。$腕表（'秩序'，函数（的newval，OLDVAL）{
    如果（的newval！= OLDVAL）{
        $超时（函数（）{
            $ element.masonry（'reloadItems'）;
            $ element.masonry（'布局'）;
        }，300）;
    }
}，真正的）;
$范围。$表（反向，功能（的newval，OLDVAL）{
    如果（的newval！= OLDVAL）{
        $超时（函数（）{
            $ element.masonry（'reloadItems'）;
            $ element.masonry（'布局'）;
        }，300）;
    }
}，真正的）;
 

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.

解决方案

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

这篇关于保持与角JS排序和过滤效果砌筑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！