Skip to content

ngFancy/ng-gridview

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

#ngGridView

An infinite grid view for angular 1.x

##Features:

  • support super large data set with smooth scrolling performance
  • custom grid cell template
  • predictable cell dimension to speed up initial render time

##Usage

Install from npm

npm install @ngfancy/ng-gridview --save

Add as an angular dependency.

import {ngGridView} from '@ngFancy/ng-gridview';
// angular should be available in GLOBAL
angular.module('myApp', [ngGridView])
    .controller('MainCtrl', () => {
        var $ctrl = this;
        var dataList = [];
        for(var i = 0; i < 200; i++){
            this.dataList.push({
                name: `dataIndex${i}`
            });
        }
        this.dataList = dataList;
    });

If you are using webpack, require the ng-gridview.scss. or reference the css in your html

<link rel="stylesheet" href="node_modules/dist/ng-gridview.css">

define your template.

<div ng-controller="MainCtrl">
    <ng-gridview list="dataList" row-height="100" column-count="2"></ng-gridview>
</div>

##Contributes

It is welcomed to contributes to this project, before contributing, you should read the Design Spec to learn the goal and the theory of this project.

###Setup development environment

clone the repository, cd into the cloned directory and run npm install to install the dependencies. The building environment require a node version > 4 and npm version > 3. then run npm start to start the webpack-dev-server at localhost:3000

To build a distribution files, run npm run build. the build files will located in dist directory.