s-yadav / angulargrid Goto Github PK

Hi,

Your plugin looks cool. But is there a way to use it with twitter bootstrap? Something like:

 <div class="masonry-grid row dynamic-grid" angular-grid="posts"  >

       <div class=" grid masonry-grid-item   col-sm-6 " ng-repeat='post in posts'>

             <htmlcontenthere class="clearfix blogpost">
             ..............
             </htmlcontenthere>
        </div>
 </div>

This one works on desktop and iphone 6, not on iphone 4-5 , some other small devices...

I want to use this library not for images. I have two ng-repeats with variable length its posibble this?

I'm getting very odd behavior in iOS Safari browser. Doesn't layout properly at all. Have you tested this or is it just me? Works fine on all other browsers and devices.

If an image is loaded, i need to change src attribute. Help please, or until image is not loaded, i need to show other image (loading process gif).

Hi Yadav,

I have about 20 images to load for each page. After I setup your module I noticed that even for a single scroll a AJAX call was being made. (At least for me, or my page setup).
After looking around your code at
https://github.com/s-yadav/angulargrid/blob/master/angulargrid.js#L289

I altered it to

compareHeight = Math.abs( (scrollHeight - contHeight * (1 + options.infiniteScrollDistance / 100)) );
if (scrollTop >= compareHeight) { ... }

The reason it was not working as expected for me is because compareHeight was always negative, so after I applied Math.abs() it worked as expected.

Not sure if this is a bug/issue. Just wanted to point it out.

Regards,
Shashidhar.G

If I refresh the grid page several times, I notice that the height applied to the grid container is calculated to be larger that than it should be on some occasions.

This issue been seperated out from #14 . As we were trying to solve two different problem there.

Hi

How can I use this package in RTL mode?

I mean, tiles start placing in page from right to left

Really thanks

Hi,

how can i remove grid space,

I get a flash of un-styled cards in the short amount of time angulargrid is calculating all of the top and left values and the height of the container element. I would like to set a variable on my scope to true whenever it is done rendering. A render-complete attribute would be helpful where you would pass in a variable to change to true when it is complete. This way I can set the opacity to 0 when that variable is false so the user does not see hundreds of cards stacked on top of each other.

I would like to animate elements once the user scrolls so new elements in my grid are in view. Adding a class once the user scrolls so that they are in view would satisfy this need. I could always do this myself but it might be a little more efficient if it were handled in angulargrid itself.

Please add bower

Hi,

I'm working with angulargrid perfectly. It's works like a charm!

I'm dealing with the possibility of having two kind of items. With this I mean that all items are always the with the same aspect and now I need to be able to add a new item with it's own aspect.

Let's suppose I have a list of Houses and I display a list of 20 items in the page. What I need is just to be able to include among the other main 20 items, one new item that show an Offer, promotion or something similar. As you can see, this new item has it's own size, different than the other 20 items.

Is it possible? if yes, how can I accomplish this?

Currently it's '=agScrollContainer' ? , which could produce error if I specify scrollContainer like the example does

Seems okay if I use @

I put some logic in the attribute and it is not adjusting after first render. I would like the gutter size to update when the attribute value changes.

I would like to add a class to the element once it's top, left, and width attributes have been calculated and applied. I almost always see a flash of stacked elements. I would like to set their opacity to 0 while this is being calculated and 1 once it is complete. I am fully aware of the image-loaded class. In my case I am not dealing with images in the elements in my grid.

I haven't made it work in hidden divs. Is there a any way to make it work ?

Is there anyway to trigger a refresh after executing a search filter (ng-repeat="image in images | filter:searchText") on an input box?

The filter works; however, when I clear the input box, all of the elements of the grid return stacked on one another (upon inspection, I see they no longer have a class of "img-loaded", and have lost their "top", "left", and "width" style attributes)

Thank you!

Hi.. I love the grid, it's the best by far, thanks for building it!

I have a rightbar with a show/hide toggle. I'm trying to use the .refresh() function to reflow to consume the extra space and it doesn't seem to be working. The data doesn't change, just more/less space available as the rightbar is toggled.

From looking at your code, it looks like you do different things on a manual refresh vs. resize. The resize recalculates width, but the refresh only takes the (previous) width and reflows.

I've worked around this issue by creating a window resize event on user action
window.dispatchEvent(new Event('resize'));

It seems like 'resize' and .refresh() should use the same logic to calculate width.

Can you update angulargrid @0.5.1 in releases

Hi!
I would like to use this plugin, because this very good :)
i have two state, list/detail. In the list view are example 10 pictures. When i upload one picture to the gallery, the list view updated, last uploaded picture the first, but the last picture in the list disappear. If i click the first picture, then go to detail view, and this picture is not this picture what i clicked.
If i refresh the browser everything work.
Do you have idea?
Thanks!

I love your Grid so far, but now I need to implement multiple sortBy Filters which happen on select:

<md-input-container>
  <label>Order by...</label>
  <md-select ng-model="sortBy">
    <md-option ng-repeat="option in options" value="{{option}}">
      {{option}}
    </md-option>
  </md-select>
</md-input-container>

in the controller i just have:

  $scope.options = ['product', 'condition', '-created_at']; //all sortBy options
  $scope.sortBy = '-created_at'; //default sortBy Value

the selected option updates the sortBy model and should then automatically update the grid:

<ul hide-sm class="dynamic-grid" angular-grid="images" grid-width="200" gutter-size="10" angular-grid-id="image-feed" refresh-on-img-load="true">
  <li ng-repeat="image in images | orderBy:sortBy" class="grid">
    {{image.product}} - {{image.condition}} - {{image.created_at}}
  </li>
</ul>

It works perfectly if i put angular-grid="sortBy". is there a simple way to use angular-grid="" to listen to multiple models?

I don't understand how to implement the manual refresh stated in the documentation, could you please provide an example for a "select" scenario?

Thank you.

Any chance of including a package.json. This would help git url dependance on npm.

Hi i am implementing a method which supports reorder the card in the grad view. I'd like to use angular-ui/ui-sortable to support drag and drop sorting. But it seems angulargrid conflicts with that library. Any alternative way to do?

Not sure if it's my problem or not , just take a look in these pics

Hi

I have a situation, there is my tiles:

sometimes, it hppens, but when I scroll down, with loading next tiles, all tiles get fix, why?

I'd like to have a directive attribute which I can bind with my controller in order to dinamically change the number of columns.

I've tried an approach by changing the attribute grid-width so that I can calculate the minimum width for a specific number of columns but I think that with your current code the attribute grid-width it's only read once, with controller's initialization.

Is there another way to do this?

I did tried the solution metioned in the doc, but it still doesn't work, even when i try to do like in your example.

If i refresh the page, it doesn't work.

Here is what i did:

html:

<div class="col-lg-12" my-portfolio >
    <ul class="dynamic-grid" angular-grid="pics" grid-width="300" gutter-size="10" angular-grid-id="gallery" refresh-on-img-load="false" >
        <li data-ng-repeat="port in pagedPortfolio.data" class="grid">
            <img src="{{port.img[0]}}" class="grid-img" />
            <p>{{port.title}}</p>
        </li>
    </ul>
</div>

app.js

.controller('PortfolioCtrl', ['$scope','angularGridInstance', function ($scope,angularGridInstance){
    $scope.pagename = "Portfolio";
    $scope.refresh = function(){
        angularGridInstance.gallery.refresh();
    }
}])

Can you provide a better example? Or a way to fix it?

_Edit_: Btw, I'm loading my data with a directive/factory but even using the refresh there, it doesn't work. Like so:

.directive('myPortfolio', ['mainFactory','angularGridInstance', function (mainFactory,angularGridInstance) {
    return {
        restrict: "A",
        link: function($scope) {
            mainFactory.getPortfolio().then(function(data) {
                $scope.pagedPortfolio = data;
                angularGridInstance.gallery.refresh();
            })
        }
    }
}])

Your package is working perfectly and its aweome :D

And i think this is the intended behavior (to centralize the items) but i was wondering if it was possible to align all items to the left so the grid doesn't get like this:

HTML:

<ul class="dynamic-grid" direction="rtol" angular-grid="vm.shows" grid-width="200" gutter-size="10" angular-grid-id="gallery" refresh-on-img-load="false" >
    <li data-ng-repeat="show in vm.shows" class="grid">
        <img ng-src="{{show.images.poster.thumb}}" data-actual-width="200px"  data-actual-height="250px" class="grid-img" />
        <div class="img-desc-wrap">
            <div class="title ng-binding">
                {{show.title}}
            </div>
        </div>
    </li>
</ul>

Thanks :)

Hi i like your plugin very much, but it has a odd filter behavior that causes animation to fail for some case (and drive me nuts ;) ).

How to reproduce:

1. visit http://ignitersworld.com/lab/angulargrid/index.html#demo
2. type "Le" into the formular - wait till animation finished - you should see 4 Items

• notice: this animation is opacity AND position

3. add a "t" so you have "Let" - you should see 1 Item

• notice: this animation is opacity only

4. you may add or delete the "t" as much as you want

• it will only animate the opacity

5. if you change back to an empty string it will renew animate both opacity AND position

My Problem

I want the position animation on every change of a filter (not only if i change from "no filter" to "a filter").

I think the problem is because of the elements that will be filtered out are not longer existent. After they reappear they have instantly a position (so the CSS has no value to animate from).

Do you have an idea how to fix?

I am using this module and implementing filters with ng-hide.
Each grid-item has an attribute "hidden" that is being changed by the filters functions.
The problem is that the items in the grid aren't organized after the attribute has been changed to "true" or "false", and the grid-items are floating on each other.

before filter func, grid-items are organized:

after filter func - not organized:

Thanks for the support!

My angulargrid setup always misses 1 item.

For example if I have 5 items in the "shots" array angulargrid displays only 4. But when I do {{shots.length}} outside of the angulargrid div, I get 5, so they are deffinitely all there. I am using angulargrid on multiple sub-pages - its everywhere the same, always 1 item missing.

I am using the ag-infinite-scroll functionality, and I load in the first page by resolve function of ui-router.
Second page upwards gets loaded by ag-infinite-scroll="vm.loadMoreShots()"

EDIT: This happens only with ag-performant-scroll="true"

Hi,

Sometimes images disappear or appear compressed horizontally .

Mac OS 10.10.4
Safari 8.0.7

question about the logic here: https://github.com/s-yadav/angulargrid/blob/master/angulargrid.js#L330

1 column has no gutter, 2 columns has 1 gutter (between the columns), 3 columns has 2 gutters, etc. There should be n-1 gutters.

The math for calculating cols (for auto gridNo) uses colWidth + options.gutterSize as if every column has a gutter. I've had to use smaller values for gridWidth in order to get the size I want. I think this calculation would work nicely if we added gutterSize to the colWidth to account for that extra gutter (which won't actually be used, it's just for the math)

cols = options.gridNo == 'auto' ? Math.floor((contWidth + options.gutterSize) / (colWidth + options.gutterSize)) : options.gridNo,

thoughts?

Hi there.

First of all, great plugin, thanks a lot!
There seems to be a small issue when the window gets resized. The images in the grid get squished.
I have noticed this happens when opening the javascript console in the browser and then resizing the window.

So to replicate the issue:

1. Load the page with the images
2. Open the JS console so that the content window gets smaller
3. With the JS console still open try to resize the browser window

On version 0.5 there is a bug where in firefox only the tiles. They look like a deck of cards stacked on top of each other. The tiles being rendered are individual directives.

angularGridInstance.gallery.refresh() didnt work when there are more than 1 gridInstance.

Hi

Thanks for this awesome package, I wanna set margin-left, margin-right to whole grid container, how can I do this?

I think I have a problem with how I've integrated your controller (index.js) into my framework - I'll paste the code below. The error I'm receiving is:

Error: [$injector:unpr] Unknown provider: ngMaterialProvider <- ngMaterial <- MainCtrl
http://errors.angularjs.org/1.5.3/$injector/unpr?p0=ngMaterialProvider%20%3C-%20ngMaterial%20%3C-%20MainCtrl
at http://localhost:3000/lib/angular/angular.js:68:12
at http://localhost:3000/lib/angular/angular.js:4418:19
at Object.getService as get
at http://localhost:3000/lib/angular/angular.js:4423:45
at getService (http://localhost:3000/lib/angular/angular.js:4571:39)
at injectionArgs (http://localhost:3000/lib/angular/angular.js:4595:58)
at Object.instantiate (http://localhost:3000/lib/angular/angular.js:4637:18)
at $controller (http://localhost:3000/lib/angular/angular.js:10042:28)
at http://localhost:3000/lib/angular-ui-router/release/angular-ui-router.js:4081:28
at invokeLinkFn (http://localhost:3000/lib/angular/angular.js:9623:9)

angular.module('app.core').controller('MainCtrl', MainCtrl);

MainCtrl.$inject = ['$scope', '$http', '$q','ngMaterial','angularGrid'];
function MainCtrl($scope, $http, $q,ngMaterial,angularGrid) {

    activate();

    ////////////////

if(vm.loadingMore) return;
vm.page++;
// var deferred = $q.defer();
vm.loadingMore = true;
var promise = $http.get('https://api.dribbble.com/v1/shots/?per_page=24&page='+vm.page+'&access_token=3df6bcfc60b54b131ac04f132af615e60b0bd0b1cadca89a4761cd5d125d608f');
promise.then(function(data) {

  var shotsTmp = angular.copy(vm.shots);
  shotsTmp = shotsTmp.concat(data.data);
  vm.shots = shotsTmp;
  vm.loadingMore = false;

}, function() {
  vm.loadingMore = false;
});
return promise;

I am interested in switching of the brick resizing effect when the page first loads. Would be create if there was an event I could listen to, and show a spinner until it fired. Any thoughts?

For some reason, when the width of the window is very small, like on any mobile device (iOS and Android), I often get a huge vertical scroll length when refreshing or entering the page. In other words, I can scroll far past the last brick. This is messing up my infinite scroll.

Still looking for a solution.

EDIT:

Turns out that you only see the problem on mobile but it also occurs on desktop (you just can't see it for some reason). This is because the problem has to do with improperly (at random) calculated number of list elements (i.e. double the number of list elements in the list elements array).

Hi, I have an unusual problem with the items shown with the library:

I have a list of items (not too large, less than 20) and at first, when it has just renderized, everything is OK.
Then, whithout interact whith the page, the scroll starts to grow infinately showing invisible divs under my initial ones. I ask with the console how mane childs have the directive DOM element and it reaches values as high as 16000 childs. At this moment mu chrome tab is already dead.

Maybe I am using the library in the wrong way:

• In my cards are images with the ng-src attribute whose url change each 5 seconds. (I think this could be the problem)
• I use as options:
  dashboard.gridOptions = { gridNo : 3, refresgOnImgLoad : false, }

Is there any way I could avoid this issue?

Hi

I want to remove exist tile, how can I do this? after removing object from angular model, empty tile is still exist

Hi,

Firstly, thanks for creating this - it's great and a lot better than a home grown solution I was using 👍

I'm using the grid within an Ionic (Cordova) app but I'm having a few issues with performant scroll.

If I load the page with the angulargrid but then rapidly switch to another page (which I believe in Ionic detaches any listeners) before returning to the page with the angulargrid I get a blank page.

All the items in the grid appear to have been detached due to the performant scroll. However, scrolling up or down doesn't trigger them to reappear. Nor does calling refresh on the angulargrid instance or by manually calling handleScroll

The only way I can fix it is by inserting more items into the model (which angulargrid is watching) - which I presume triggers ng-repeat to update the DOM.

I've had a play about with the source to try and fix the issue but haven't had much luck.

I hope my rambling above makes sense but if you need any clarification just shout. Fingers crossed someone knows whats going on :)

Thanks a lot,

Tom

I have some customers who upload images of boards (surf boards, snowboards) standing on end. The images are very tall and thin. This makes grids look pretty hideous.

A way to remedy the situation is to allow a max-height property for ag-grid, with modifications to the size detection algorithm to take this into account and limit height (and thus width) and centre the image within the grid element accordingly.

I'm looking for a way to "reflow" a grid before it's actually going to reflow. What i mean is, i'd like to add an animation which cause a change in height of an element and wait with animation to this element, before the grid(reflow) will make a space for my element.

@s-yadav do you have any sugestion how to make this and sync the animation?

Is it possible to add a virtual scroll mechanism to this so when a user scrolls it removes items from the DOM so that it runs much smoother?

We use jshint as part of our grunt build process to verify best practices in coding. Your angulargrid generates 17 errors. Do you have a version that will pass jshint?