johnnythetank / angular-bricklayer Goto Github PK
View Code? Open in Web Editor NEWAngularJS module for ademilter's bricklayer, a lightweight & independent cascading grid layout library
Home Page: http://plnkr.co/edit/mo3G36
License: MIT License
AngularJS module for ademilter's bricklayer, a lightweight & independent cascading grid layout library
Home Page: http://plnkr.co/edit/mo3G36
License: MIT License
I was working in this issue on my "own" version of this plugin (Just rewrote in my application style), and with this slight changes you can:
This is a gist with the plugin code https://gist.github.com/epicleptico/27e6e8e444d11d0aa4686f112ea7964f (As you must see i have application specific code style).
You can take a look on working plunkr on https://plnkr.co/edit/3NmNUIfACo6Yb8qCniZb (Use full screen preview)
Just to note, for multiple versions you must place id
and data-target
on main div and child divs. And for delete you must place inside a $timeout
a $broadcast with removing data.
Hope that helps. Thanks
HI,
I am having bricklayer grid in tab. In my case I am able see the images but only one column and 100% width when I resize the browser I am able to see 4 column grid(desktop default view). In this case how to redraw the grid?
Please find attached Plunk http://plnkr.co/edit/5i4wrO0UvHCICxp3R6rg?p=preview
Bricklayer grid is in second tab. by default nothing is visible if you resize the grid everything shows up.
Thanks
Here's an example of what I'm trying to do:
<input type="text" ng-model="vm.filterTags" />
<div class="bricklayer" ng-cloak>
<div bricklayer-append ng-repeat="image in vm.images | filter:{tags:vm.filterTags}" ng-cloak>
<img src="....." style="max-width:100%;" />
</div>
</div>
vm.images = [
{ filename: "1.jpg", tags: "nature" },
{ filename: "2.jpg", tags: "ball" },
{ filename: "3.jpg", tags: "car" }
];
Hi,
I am trying to load 237 items with this components but the browser simple don't response. Then I had to remove JS the code from the page.
It is working fine If I just load two items.
When using bricklayer-append on ng-repeat's result, how to clear the array on click? When trying to empty the array on click, this directive keeps adding the new result to the old array.
I have imagesLoaded library used on my project and when tried your plugin i reach the trouble that is loaded twice.
Just split it and add imagesLoaded as dependency.
Hi,
If I updated the appendData in the $scope with a new array values, it won't update correctly the array and the items get always append to the array. In my case the array get updated every 30seg. So it will always present new duplicate values.
<div class="bricklayer" ng-cloak>
<!-- append -->
<div bricklayer-append ng-repeat="item in appendData" ng-cloak></div>
<!-- prepend -->
<div bricklayer-prepend ng-repeat="item in prependData" ng-cloak></div>
</div>
Need someone who combines both logos of bricklayer and angularjs
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.