Overview

This is a library for AngularJS built with TypeScript to manage displayed elements in an ng-repeat like manner.

Features

  • ng-repeat syntax (limited)
  • configurable
  • supports both scroll direction
  • cleans elements

Installation

Import angular-infinite-scroller module to your main angular module. 

angular.module("example", ['angular-infinite-scroller', ... ]);

Then you are free to use the infinite-scroller directive. 

<div class="scroll-container">
  <div infinite-scroller="item in simpleitems">
    {{item}}
  </div>
</div>
Styling! Make sure to set height and overflow of the parent container!

Simplest example:

div.scroll-container { height: 200px; overflow-y: scroll; }

Usage

Simple list

Simple list loading from 1 to 100 

scope.simpleitems = Array(100).fill().map((v,i) => i+1);
<div class="scroll-container">
  <div infinite-scroller="item in simpleitems">
    {{item}}
  </div>
</div>
div.scroll-container { 
  height: 200px;
  overflow-y: scroll; 
}

Result

{{item}}

Tables

Some CSS tweek is needed for tables to work 

const names = ['Rich', 'Leon', 'Jefferson', 'Glady', 'Vivien', 'Kyong', 'Kamilah', 'Kasi', 'Ralph', 'Leota', 'Jeromy', 'Bernardina', 'Sammie', 'Chris', 'Jetta'];

scope.tablerows = Array(100).fill().map((v, i) => {
const randName = names[Math.floor(Math.random() * names.length)];
  return {
      id: i + 1,
      name: randName
  };
});
<div class="table-example-container">
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>name</th>
            </tr>
        </thead>
        <tbody class="scroll-container">
            <tr infinite-scroller="row in tablerows">
                <td>{{row.id}}</td>
                <td>{{row.name}}</td>
            </tr>
        </tbody>
    </table>
</div>
.table-example-container {
    width: 300px;
}

.table-example-container table thead, .table-example-container table tbody {
    display: block;
}

.table-example-container tbody.scroll-container {
    height: 200px;
    overflow-y: scroll;
}

.table-example-container table tbody tr, .table-example-container table thead tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.table-example-container table th, .table-example-container table td {
    text-align: left;
    width: 100%;
}

.table-example-container table th:nth-child(1), .table-example-container table td:nth-child(1) {
    width: 30px;
}

Result

id name
{{row.id}} {{row.name}}

Known issues

Binding with curly brackets

First population of items is using calculation based on items' height, so it's important to make rows rendered with it's final height even before the binding actually happened.

To prevent accidental linebreaking before the template is linked avoid using brackets for longer texts. Instead of: 

<p>{{currentCar.Owner.Firstname + '' + currentCar.Owner.LastName}}</p>
Use: 
<p ng-bind="currentCar.Owner.Firstname + '' + currentCar.Owner.LastName"></p>

One time binding

DOM elements in the list are reused in the scrolling process, and are not cleaned up completely.

To make this behaviour work, avoid using one time binding in the list.