homerjam / angular-gridify Goto Github PK
View Code? Open in Web Editor NEWAngular directive that creates a justified grid of elements
Home Page: http://homerjam.github.io/angular-gridify
Angular directive that creates a justified grid of elements
Home Page: http://homerjam.github.io/angular-gridify
I'm wondering how welcome a PR would be for removing the jQuery dependency for this directive?
When I first tried using it, I didn't realise I needed jQuery (as it doesn't seem to be mentioned anywhere) and was frustrated with it not working. From quickly glancing over the source, there doesn't seem to be any substantial code that relies on jQuery that couldn't be done in vanilla JS.
Would you accept a PR? This directive is exactly what I'm looking for, but now I have another ~80KB library that I didn't need before.
Hi James,
Is there a way for the grid to watch the perRow? I've tried something like the below, but not having much luck.
Ideally I want 3 items per row on any screens over 767px and just one item on any smaller devices.
perRow: itemsPerRow
$scope.itemsPerRow = 3;
window.onresize = function() {
if (window.innerWidth >= 767) {
$scope.$apply(function() {
$scope.itemsPerRow = 3;
});
} else {
$scope.$apply(function() {
$scope.itemsPerRow = 1;
});
}
}
It would be nice to see option allowing filtering instead of creating filtered copy of collection, and manually triggering filtering.
Hey James,
Hopefully the last question... :)
I have a 'load more' function that simply pushes new objects to my $scope.cards array which works fine. I'm watching $scope.cards and it refreshes the grid accordingly.
However, I also have a 'delete' function that splices objects from the array but the grid doesn't refresh even though it's watching for changes to $scope.cards. I just end up with a blank space on my screen.
Any ideas why this would be happening?
Thanks.
Is there a way to refresh the layout on click? I have a 'load more' button that appends more items to the array i'm looping through with ng-repeat. Unfortunately when the next lot of items load, they don't get the layout properties.
After filtering a collection if it contain only one or two things, bricks are growing to huge sizes if they are 1:n ratio.
It looks like the container is being oversized, possibly its taking its size from the parent but excluding padding? Or possibly its adding an extra gutter (or two) in the calculation...
@oliodj any time to look at that? Also check out homerjam/angular-gridflex for a better version of this directive
Hi James,
I have an issue with a certain grid I'm using. It has 5 images and I'm trying to get 3 in one row and 2 in the next.
My options:
minRowLength: 2
perRow: 3
Am I missing something obvious?
I always get 4 image in the top row and one image in the second row that's huge if I set my minRowLength: 1
or small if i set it to 2
Trying to debug the code now to find out why this is happening but any help would be appreciated
Thanks :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.