Infinite Scroll

The infinite scroll component allows users to load data as the page scrolls.

Infinite scroll settings

  • bb-infinite-scroll
    • bb-infinite-scroll-has-more — Set to true to indicate that there is more data available to be loaded, false otherwise.
    • bb-infinite-scroll-load — Specifies the function to be called when the infinite scroll component is scrolled into view. This function should return a promise if you are loading data asynchronously.

Demo

{{item.name}} {{item.description}}

Markup

<div ng-controller="InfiniteScrollDemoController as infiniteCtrl">
  <bb-repeater bb-repeater-expand-mode="none">
    <bb-repeater-item ng-repeat="item in infiniteCtrl.data">
      <bb-repeater-item-title>
        {{item.name}}
      </bb-repeater-item-title>
      <bb-repeater-item-content>
        {{item.description}}
      </bb-repeater-item-content>
    </bb-repeater-item>
  </bb-repeater>
  <bb-infinite-scroll
    bb-infinite-scroll-has-more="infiniteCtrl.hasMore"
    bb-infinite-scroll-load="infiniteCtrl.loadFn()">
  </bb-infinite-scroll>
</div>

JavaScript

/*global angular */
(function () {
    'use strict';

    function InfiniteScrollDemoController($timeout) {
        var vm = this,
            idCount = 1;

        function addData() {
            var i,
                newStuff = [];
            for (i = 0; i < 5; i++) {
                newStuff.push({
                    id: idCount,
                    name: 'Title ' + idCount,
                    description: 'A description for ' + idCount
                });
                idCount++;
            }
            vm.data = vm.data.concat(newStuff);
        }
        vm.data = [];
        addData();
        
        vm.hasMore = true;

        vm.loadFn = function () {
            return $timeout(function () {

                addData();

                if (idCount > 9) {
                    vm.hasMore = false;
                }
            }, 4000);

        };
    }

    InfiniteScrollDemoController.$inject = ['$timeout'];

    angular.module('stache')
        .controller('InfiniteScrollDemoController', InfiniteScrollDemoController);
})();