Skip to content

Instantly share code, notes, and snippets.

@four2theizz0

four2theizz0/Ionic-Framework-Infinite-Scroll-and-Angular-Filter-limitTo.markdown

Created June 19, 2014 09:26
Show Gist options
  • Save four2theizz0/bb705e8f0fd478dafa2b to your computer and use it in GitHub Desktop.
Save four2theizz0/bb705e8f0fd478dafa2b to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Sunny.
Raw
index.html
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic List Directive</title>
<link href="http://code.ionicframework.com/0.9.24/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.24/js/ionic.bundle.min.js"></script>
</head>
<body>
<pane ng-controller="MainCtrl">
<header-bar title="'Infinite Scroll Example'">
</header-bar>
<content has-header="true" padding="true" on-infinite-scroll="addMoreItem">
<div class=" list padding">
<div ng-repeat="item in items | limitTo:numberOfItemsToDisplay" class="item" type="item-text-wrap">
<h3>{{item}}</h3>
</div>
</div>
</content>
</pane>
</body>
</html>
Raw
Ionic-Framework-Infinite-Scroll-and-Angular-Filter-limitTo.markdown

Ionic Framework Infinite Scroll and Angular Filter limitTo

Combine both to work with static data in the array

A Pen by Sunny on CodePen.

License.

Raw
script.js
angular.module('myApp', ['ionic'])
.controller('MainCtrl', function($scope) {
$scope.numberOfItemsToDisplay = 20; // number of item to load each time
$scope.items = getData();
function getData() {
var a = [];
for (var i=1; i< 1000; i++) {
a.push(i);
}
return a;
}
$scope.addMoreItem = function(done) {
if ($scope.items.length > $scope.numberOfItemsToDisplay)
$scope.numberOfItemsToDisplay += 20; // load 5 more items
done(); // need to call this when finish loading more data
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment