Fork me on GitHub

Angular Grid

Pinterest like responsive masonry grid system for angular.

Sort By :

Features

Usage

  1. Include angulargrid.js
    <script src="angulargrid.js"></script>
  2. Inject the module on your app
     var App = angular.module('demoApp', ['angularGrid']);
  3. Use directive as attribute defining the model you want to listen
                       <ul angular-grid="pics">
                            .....
                            .....
                        </ul>
                   

Example

HTML
           <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="pic in pics" class="grid">
                    <img src="{{pic.media.m}}" class="grid-img" data-actual-width = "{{pic.actualWidth}}"  data-actual-height="{{pic.actualHeight}}" />
                </li>
            </ul>
        

In above html angular-grid="pics" defines the model you want to listen, so here its listening for pics grid-width, gutter-size and refresh-on-img-load are otional configuration for angular grid.

CSS
            .grid {
                border: 1px solid #cccccc;
                list-style: none;
                background: #ffffff;
                box-sizing: border-box;
                -moz-box-sizing : border-box;
                -webkit-transition: all 0.6s ease-out;
                transition: all 0.6s ease-out;
            }
            .grid-img {
                width: 100%;
                vertical-align: middle;
                -webkit-transition: opacity 0.6s ease-out;
                transition: opacity 0.6s ease-out;
                background-color: #fff;
                opacity: 0;
                visibility: hidden;
            }

            .grid-img.img-loaded{
                visibility: visible;
                opacity: 1;
            }
        
JS
            angular.module('demoApp', ['angularGrid'])
                .service('imageService',['$q','$http',function($q,$http){
                    this.loadImages = function(){
                        return $http.jsonp("https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=JSON_CALLBACK");
                    };
                }])
                .controller('demo', ['$scope','imageService','angularGridInstance', function ($scope,imageService,angularGridInstance) {
                   imageService.loadImages().then(function(data){
                        data.data.items.forEach(function(obj){
                            var desc = obj.description,
                                width = desc.match(/width="(.*?)"/)[1],
                                height = desc.match(/height="(.*?)"/)[1];

                            obj.actualHeight  = height;
                            obj.actualWidth = width;
                        });
                       $scope.pics = data.data.items;
                    });
                    $scope.refresh = function(){
                        angularGridInstance.gallery.refresh();
                    }
                }]);
        

Animating on enter or leave of any item.

Angulargrid rely on ngAnimate module for smooth transition on enter or leave of any item. It only support css animation of ngAnimate for now.

Add ngAnimate module to your app.
 var App = angular.module('demoApp', ['angularGrid']);
and then following css can be used to add transition on above example.
            .dynamic-grid {
              position: relative;
              display: none;
            }
            .dynamic-grid.angular-grid {
              display: block;
            }
            .grid {
              position: absolute;
              list-style: none;
              background: #ffffff;;
              box-sizing: border-box;
              -webkit-transition: all 400ms ease;
              transition: all 400ms ease;
              overflow: hidden;
              border-radius: 10px;
            }
            .grid.ng-leave {
              -webkit-transition: all ease 400ms;
              transition: all ease 400ms;
            }
            .grid.ng-leave.ng-leave-active {
              -webkit-transform: scale(0.5);
              transform: scale(0.5);
              opacity: 0;
            }
            .grid.ng-enter {
              -webkit-transition: all ease 400ms;
              transition: all ease 400ms;
              -webkit-transition-delay: 500ms;
              transition-delay: 500ms;
              -webkit-transform: scale(0.5);
               transform: scale(0.5);
              opacity: 0;
            }
            .grid.ng-enter.ng-enter-active {
              -webkit-transform: scale(1);
              transform: scale(1);
              opacity: 1;
            }
            .grid-img {
              width: 100%;
              vertical-align: middle;
              background-color: #fff;
              opacity: 0;
              visibility: hidden;
            }
            .grid-img.img-loaded {
              visibility: visible;
              opacity: 1;
            }
        

Options

Options can be added as attibute containing value or scope model. You can also pass an option object (or scope model containing all options) in angular-grid-options attribute. When scope model are used on attributes you can dynamically change those model (after initilization) to reflect new options in angulargrid.
Note : When options are passed as attributes it need to be hyphen seperated instead of camel case. ie grid-width.

                App.controller('demo', ['$scope', function ($scope) {
                   $scope.gridWidth = 300;
                   $scope.angularGridOptions = {
                       gridWidth : 300,
                       gutterSize : 10,
                       refreshOnImgLoad : false
                   }
                }]);
        
           <ul class="dynamic-grid" angular-grid="pics" ag-grid-width="gridWidth" ag-gutter-size="10" ag-id="gallery" ag-refresh-on-img-load="false" >
                ....
           </ul>

           OR

           <ul class="dynamic-grid" angular-grid="pics" ag-options="{gridWidth : 300, gutterSize: 10}" ag-id="gallery"  >
                ....
           </ul>

           OR
           <ul class="dynamic-grid" angular-grid="pics" ag-options="angularGridOptions" ag-id="gallery"  >
                ....
           </ul>

        

Available Options

Options as attribute on element

All options defined above can be defined as attribute. But you have to prefix them with ag-, ex : ag-grid-width or ag-gutter-size.

Other options which are specific to attribute are:

Handeling Images

If your list contains any image inside, as it will load asynchronously, plugin refresh the layout and add following classes to list item and images, so you can handle transitions of image better,

images : image-loading : when an image is loading inside list item image-loaded : when an image is loaded inside list item

list item : image-loading : when any of image is loading inside list item image-loaded : when all images are loaded inside list item

Optionally if you know dimension of images you can add data-actual-width and data-actual-height attributes, so that it will not refresh the layout when those images are loaded.

Refreshing manually

To get the refrence of instance you need to define angular-grid-id on the element which you can get back by injecting angularGridInstance to any controller or directive. Using your id you can refresh your layout ex : angularGridInstance.gallery.refresh();

Handeling search, filter and sorting.

As angulargrid rely on watching list model to refresh the view, it does not know when the view is affected by angular filters as they don't change the actual model. So instead of relying on angular filters you can write your methods to search or filter the items.

            //intialized imageList
            var imageList = getImageListFromSomeService();

            //make sure to keep a refrence of original list and create a new list refrence for scope using concat method.
            $scope.imageList = imageList.concat([]);

            //apply search on the list base on searchTxt which can be binded to an input element
            $scope.$watch('searchTxt', function (val) {
                val = val.toLowerCase();
                $scope.imageList = imageList.filter(function (obj) {
                    return obj.title.toLowerCase().indexOf(val) != -1;
                });
            });

            //apply filter based on type
            $scope.showImagesOfType  = function(type){
                $scope.imageList = imageList.filter(function (obj) {
                    return obj.type == type;
                });
            }

            //sort images by something (lets say likes)
            $scope.sortByLikes = function () {
                $scope.imageList.sort(function (a, b) {
                    return b.likes - a.likes;
                });
            }
        

infinteScroll

There are four options infiniteScroll, scrollContainer, infiniteScrollDistance, infiniteScrollDelay for infiniteScroll. You define an function call on infiniteScroll which will be called when scrollTop position of scrollContainer reached to specified infiniteScrollDistance from the bottom.

angularGrid allows having this feature in custom scroll as well. In this case to manually call .handleScroll method of angularGrid's instance. See Integrating with custom scroll plugins for more detail.

Note: If you are setting a selector (a string) as ag-scroll-container value make sure you wrap with an extra quote. Ex : ag-scroll-container=" '#wrapperElement' "

JS

            //inside contoller
            //intialized imageList
            $scope.imageList = getImageListFromSomeService();
            var page = 1;

            $scope.imageList = imageList.concat([]);

            //method to load next data
            $scope.laodMore = function(){
                getImageListFromSomeService(page).then(function(nextPageImages){
                    $scope.imageList = $scope.imageList.concat(nextPageImages);
                    page++
                });
            };
        

HTML

            <ul class="dynamic-grid" angular-grid="pics" ag-grid-width="300" ag-gutter-size="10" ag-id="gallery" ag-scroll-container="'#gallery-wrap'" ag-infinite-scroll="loadMore()" >
                ....
           </ul>
        

Integrating with custom scroll plugins

You can use angulargrid side by side with any custom scroll plugins. As when using custom scroll plugin it will not trigger native scroll events, you have to call scroll method from instance manually to notify the scroll position. This is only required when you are use infiniteScroll or performantScroll feature of angulargrid, if not it is not required.

JS

            App.controller('demo', ['$scope','imageService','angularGridInstance', function ($scope,imageService,angularGridInstance) {
               ...
               ...
               $scope.onScroll = function(scrollTop){
                   angularGridInstance.gallery.handleScroll(scrollTop);
               }
            }]);
        

HTML

            <div id="gallery-wrap" custom-scroll on-scroll="onScroll">
                <ul class="dynamic-grid" angular-grid="pics" ag-grid-width="300" ag-gutter-size="10" ag-id="gallery" ag-scroll-container="#gallery-wrap" ag-infinite-scroll="loadMore()" >
                    ....
                </ul>
            </div>

        

Limitations