passy / angular-masonry

An AngularJS directive for Masonry.
https://passy.github.io/angular-masonry
MIT License
1.12k stars 216 forks source link

Preserve order for ngRepeat #192

Open bjarnef opened 7 years ago

bjarnef commented 7 years ago

I am using this plugin on a filtered list of products, however is there a way to keep the order specified by orderBy on ngRepeat? It seems always to append items on filtering. If I remove the mansory directive the products are sorted correct by product name.

I have also tried adding preserve-order, but it didn't seem to have any effect on the order.

<div class="products-list products-grid" masonry preserve-order masonry-options="{ gutter: 30 }">
    <a href="{{product.url}}" class="masonry-brick grid-item grid-cell" masonry-tile data-ng-repeat="product in filteredProducts = (vm.products | dynamicFilter:vm.filters:vm) | orderBy:'name'">
        <div class="grid-item-inner">
            <img ng-if="product.imageUrl" src="{{product.imageUrl}}?mode=crop&width=360&height=300" alt="{{product.name}}" />
            <h3>{{product.name}}</h3>
            <div ng-repeat="p in product.properties">
                {{p.name}} - {{p.value}}
            </div>
        </div>
    </a>
</div>