| <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> |
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.
| 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'); | |
| }); | |
| }; | |
| }); |
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"
}
]