Warning: This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. For more information, see developer.blackbaud.com/skyux.

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);
})();