带有 jquery 砌体的 Angular JS [英] Angular JS with jquery masonry

问题描述

我需要使用 angular 和 masonry，还需要实现排序和过滤.这里的小提琴确实使用了带有 Angular 的砌体，并且具有过滤和排序功能，但是布局看起来不像砌体.我认为根本没有应用砖石布局.

http://jsfiddle.net/rdikshit/6swek/3/

 
<div ng-controller="MainCtrl"><input type="text" ng-model="nameFilter"/><a href="#" ng-click="order = 'id'; reverse=!reverse">按id排序</a><a href="#" ng-click="order = 'name';reverse=!reverse">按名称排序</a><a href="#" ng-click="order = 'age';reverse=!reverse">按年龄排序</a><div class="items" 砌体 ><div ng-repeat="item in items | filter: { name: nameFilter } | orderBy: order:reverse" class={{item.style}}><span>{{item.name}}</span><span>id:{{item.id}}</span><br/><span>年龄:{{item.age}}</span><br/><span>样式:{{item.style}}</span>

这是 Passy 指令的另一个小提琴:http://jsfiddle.net/rdikshit/6swek/5/

仍然不起作用.现在连排序和过滤都不起作用.

解决方案

我修改了你的 JSFiddle 并让它工作.由于未指定 columnWidth，因此使用第一个元素的宽度.这就是为什么元素之间有时会出现间隙

需要注意的几点:

• 不要保存 Masonry 实例，因为您使用的是 JQuery 版本.要访问 Masonry 方法，只需获取容器元素，然后执行 container.masonry( 'methodName', arguments );
• 控制器中的手表并不理想，在实际应用中，您可能希望将它们放入指令中
• 当您将 ngAnimate 作为依赖项之一时，您观察 Masonry 容器中子项数量的技术将不起作用.导致DOM树在$digest()之后更新，导致$watchmiss

I need to use angular and masonry and also implement sorting and filtering. The fiddle here does use the masonry with Angular and has filtering and sorting working, however the layout does not seem like masonry. I do not think the masonry layout is applied at all.

http://jsfiddle.net/rdikshit/6swek/3/

  <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 class="items" masonry >
         <div ng-repeat="item in items | filter: { name: nameFilter } | orderBy: order:reverse" class={{item.style}}>

          <span>{{item.name}}</span>
            <span>id: {{item.id}}</span>
            <br /> <span>Age: {{item.age}}</span>
                         <br /> <span>Style: {{item.style}}</span>

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

Here is another fiddle with Passy's directive: http://jsfiddle.net/rdikshit/6swek/5/

STill does nt work. Even the sorting and filtering are not working now.

解决方案

I modified your JSFiddle and got it to work. Since columnWidth is not specified, the width of the first element is used. That's why there is gap between the elements sometimes

Few points to look out for:

• Don't save the Masonry instance, since you are using the JQuery version. To access Masonry methods, simply get the container element then do container.masonry( 'methodName', arguments );
• The watches in the controller are not ideal, in a real app you probably want to put them into a directive
• The technique where you watch the number of children in the Masonry container doesn't work when you have ngAnimate as one of your dependency. It cause the DOM tree to be updated after $digest(), which make $watch miss

这篇关于带有 jquery 砌体的 Angular JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！