An infinite grid view for angular 1.x
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
playground
src
.gitignore
.npmignore
LICENSE
README.md
design-spec.md
gridview-layout.png
gridview-layout.xml
helpers.js
package.json
tsconfig.json
typings.json
webpack.build.js
webpack.dev.js

README.md

#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.