Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save four2theizz0/71fe9788955e1454b9fc to your computer and use it in GitHub Desktop.
Save four2theizz0/71fe9788955e1454b9fc to your computer and use it in GitHub Desktop.
A Pen by Jeremy Wilken.
<html ng-app="App">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic Infinite Scroll</title>
<link href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js">
</script>
</head>
<body ng-controller="Ctrl">
<ion-pane ng-controller="Ctrl">
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic GitHub Commits</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<div class="item" ng-repeat="commit in commits">
<h3>{{commit.commit.message}}</h3>
<p>{{commit.commit.author.name}}, {{commit.commit.author.date | date:'short'}}</p>
</div>
</div>
<ion-infinite-scroll on-infinite="load()" ng-if="more"></ion-infinite-scroll>
</ion-content>
</ion-pane>
</body>
</html>

Ionic Infinite Scroll showing Github Commits

This pen shows the Github commits for the Ionic Framework as an infinite scroll list. It makes HTTP requests to load the data (may happen so fast you don't notice) but it only loads 30 items at a time. Please note that Github's API is rate limited, so you get 60 requests an hour unless you sign the request with Github's authentication.

A Pen by Jeremy Wilken on CodePen.

License.

angular.module('App', ['ionic'])
.controller('Ctrl', function ($scope, $http) {
var page = 1;
$scope.commits = [];
$scope.more = true;
$scope.load = function () {
$http.get('https://api.github.com/repos/driftyco/ionic/commits?page=' + page)
.success(function (commits, status, headers) {
if (headers('link').search('rel="next"') < 0) {
$scope.more = false;
}
angular.forEach(commits, function (commit) {
$scope.commits.push(commit);
});
})
.finally(function () {
page++;
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
});
@balajisrirangam
Copy link

it only loads from github, but when i enter my url ex: http://localhost:4567/products/retrieve?cat=xyz&page=1 it returns nothing. but this url gives back json data when tested in REST API
[
{
"_id": {
"_time": 1418409102,
"_machine": -1962203824,
"_inc": -1472855952,
"_new": false
},
"category": "Aluminium",
"code": "LB90",
"desc": "12 x 12 mm Aluminium Square bar Grade Alloy 6061",
"manufacturers": [
"Tambawala Metal Enterprises",
"Galco Group",
"Tamilnad Aluminium Company"
],
"name": "Aluminium Square Bar",
"orderSpec": [
"kgs",
"metric ton"
],
"purpose": [
"Grill",
"Fabrication Works"
],
"specs": {
"length": 12,
"width": 12,
"uom": "mm",
"grade": "Alloy 6061"
},
"url": "LB90.jpg"
}
]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment