infinite scroll example

Author: plong0

docs/assets/demo.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var app = angular.module('demo', ['ngSanitize', 'ui.select']);
+var app = angular.module('demo', ['ngSanitize', 'ui.select', 'ui.scrollpoint']);
 
 /**
  * AngularJS default filter with the following expression:
@@ -212,6 +212,32 @@ app.controller('DemoCtrl', function ($scope, $http, $timeout, $interval) {
     }
   }
 
+  vm.infinity = {
+    cursor: 0, // start from (limitTo begin parameter requires angular >= 1.4.0)
+    count: 10, // starting count
+    limit: 10, // how many to show per load
+    loading: false, // loading state
+    more: function(distance, element, edge) {
+      if (distance < 0 && (edge || element[0].offsetTop) && !$scope.infinity.loading) {
+        // make sure we won't exceed the bounds
+        if (($scope.infinity.cursor + $scope.infinity.count) < $scope.countries.length) {
+          $scope.infinity.loading = true;
+          $scope.$apply(); // infinity.more is triggered by non-angular window scroll event
+
+          // using a $timeout for demo purposes (this would typically be some async call to load more resources)
+          $timeout(function(){
+            $scope.infinity.loading = false;
+            $scope.infinity.count += $scope.infinity.limit;
+            var overflow = ($scope.infinity.cursor + $scope.infinity.count) - $scope.countries.length;
+            if(overflow > 0){
+              $scope.infinity.count -= overflow;
+            }
+          }, 500);
+        }
+      }
+    }
+  };
+
   vm.country = {};
   vm.countries = [ // Taken from https://gist.github.com/unceus/6501985
     {name: 'Afghanistan', code: 'AF'},

docs/examples/demo-header-and-footer.html

@@ -0,0 +1,35 @@
+<h3>Basic Header and Footer</h3>
+<p>Selected: {{ctrl.address.selected.formatted_address}}</p>
+<ui-select ng-model="ctrl.address.selected"
+           theme="bootstrap"
+           ng-disabled="ctrl.disabled"
+           reset-search-input="false"
+           style="width: 300px;"
+           title="Choose an address">
+  <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
+  <ui-select-header><h4>Simple Header</h4></ui-select-header>
+  <ui-select-choices repeat="address in ctrl.addresses track by $index"
+           refresh="refreshAddresses($select.search)"
+           refresh-delay="0">
+    <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
+  </ui-select-choices>
+  <ui-select-footer><strong>Simple Footer</strong></ui-select-footer>
+</ui-select>
+
+<h3>Infinite Scrolling</h3>
+<p>Selected: {{ctrl.country.selected.name}}</p>
+<ui-select ng-model="ctrl.country.selected"
+           theme="bootstrap"
+           ng-disabled="ctrl.disabled"
+           style="width: 300px;"
+           title="Choose a country">
+  <ui-select-match placeholder="Select a country from the list...">{{$select.selected.name}}</ui-select-match>
+  <ui-select-choices repeat="country in ctrl.countries | limitTo : ctrl.infinity.count : ctrl.infinity.cursor" ui-scrollpoint-target>
+    <span ng-bind-html="country.name | highlight: $select.search"></span>
+    <small ng-bind-html="country.code | highlight: $select.search"></small>
+  </ui-select-choices>
+  <ui-select-footer>
+    <div ng-show="ctrl.infinity.loading" class="spinner">Loading more countries...</div>
+    <span ui-scrollpoint ui-scrollpoint-enabled="{{!ctrl.infinity.loading}}" ui-scrollpoint-edge="'bottom'" ui-scrollpoint-action="ctrl.infinity.more"></span>
+  </ui-select-footer>
+</ui-select>