dv336699 / ng-isotope

AngularJS directives for Isotope by Metafizzy

ng-isotope

AngularJS directives for Isotope by Metafizzy

Using current isotope available v2.0.0-beta.8 and Angular 1.2.14

This is a working in progress. Pull requests are welcome.

How to use?

Install using bower install ng-isotope

Add to your head isotope.pkgd.js ng-isotope.js

See demo.html for code samples

Settings

========= You can set a few options like so

 <div isotope-grid="elementsList" layout-mode="" item-selector="" isotope-reload-event="reload-elements" isotope-sort-event="sort-elements" isotope-filter-event="filter-elements">

ng-isotope's Issues

Flip sort order

Ay idea how to reverse the sort order?

duplicate code in isotopeGrid directive

there are two $watch on items:
scope.$watch('items', function () {
$timeout(function () {
element.isotope('reloadItems').isotope(options);
});
}, true);

using angular filter:search

when using the angular js search with ng-isotope, the items does not rearrange initially, it seems stick at its original place, leaves a lot of blank spaces between tiles.

wonder if anyone has some suggestions on how to resolve it.

here is the code I added to the demo.html

Search

     <input type="text" name="search" id="search" value="" placeholder="Start typing..." autocomplete="off" ng-model="search"/> 
     <a href="#" id="showAll">Show all</a>
   </div>
   <p id="noMatches" style="display:none;">No matches found</p>

filter button does not work with ng-repeat

I am using your library in one of my project, let me first thank you for creating this library.

I am running into an issue though:
when trying to create filter buttons with ng-repeat, it does not work.

Then, I decided to try using your demo.html and here is the code:

Filter using ng-repeats

<div class="btn-group" isotope-filter isotope-filter-event="filter-elements" isotope-filter-group="metals">
    <button isotope-filter-by="*" class="btn btn-default active">show all</button>

    <button ng-repeat="type in types track by $index" isotope-filter-by=".{{types[$index]}}" class="btn btn-default">{{types[$index]}}</button>
    
</div>

Wonder if you have any insight about this?

how do I clear the filters from outside the button group