Ionic Infinite outside ion-content with ion-pane

Developer
Size
3,117 Kb
Views
16,192

How do I make an ionic infinite outside ion-content with ion-pane?

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.. What is a ionic infinite outside ion-content with ion-pane? How do you make a ionic infinite outside ion-content with ion-pane? This script and codes were developed by Felquis on 08 December 2022, Thursday.

Ionic Infinite outside ion-content with ion-pane Previews

Ionic Infinite outside ion-content with ion-pane - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ionic Infinite outside ion-content with ion-pane</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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="https://code.ionicframework.com/1.0.0-beta.13/css/ionic.css" rel="stylesheet"> <script src="https://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 ng-bind-html="commit.commit.message | linkCommit"></h3> <p>{{commit.commit.author.name}}, {{commit.commit.author.date | date:'short'}}</p> </div> </div> <!-- Infinite Scroll is activated here to load if more pages exist. --> </ion-content> <ion-infinite-scroll on-infinite="loadGithubCommits()"></ion-infinite-scroll> </ion-pane> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Ionic Infinite outside ion-content with ion-pane - Script Codes CSS Codes

/* Ionic Infinite outside ion-content with ion-pane */
ion-infinite-scroll { height: 100%;
}

Ionic Infinite outside ion-content with ion-pane - Script Codes JS Codes

angular.module('App', ['ionic'])
.controller('Ctrl', function ($scope, $http, $ionicPopup, $filter) { var page = 1; $scope.commits = []; $scope.more = true; $scope.loadGithubCommits = function () { // Load the data from the github api. $http.get('https://api.github.com/repos/driftyco/ionic/commits?page=' + page) .success(function (commits, status, headers) { // Check Link header to determine if more pages are available. // If not, disable infinite scroll. /*if (headers('link').search('rel="next"') < 0) { $scope.more = false; }*/ // Push all of the commits from response into model. angular.forEach(commits, function (commit) { // $scope.commits.push(commit); }); }) .error (function (data, status, headers) { // Disable infinite scroll since we've got an error. $scope.more = false; if (headers('x-ratelimit-remaining') == 0) { // Check if it is due to Github rate limiting. var popup = $ionicPopup.alert({ title: 'You have exceeded GitHub\'s Rate Limit.', template: 'Try again after ' + $filter('date')(parseInt(headers('x-ratelimit-reset')) * 1000, 'short') }); } else { // Otherwise show general alert. $ionicPopup.alert({ title: 'GitHub did not respond.', template: 'Please try again.' }); } }) .finally(function () { // On finish, increment to next page and alert infiniteScroll to close. page++; // $scope.$broadcast('scroll.infiniteScrollComplete'); }); };
})
.filter('linkCommit', function () { return function (text) { // Replace any issue numbers with a link to the issue. return text.replace(/\#(\d+)/gmi, "<a href=\"https://github.com\/driftyco\/ionic\/issues\/$1\">\#$1<\/a>") };
});
Ionic Infinite outside ion-content with ion-pane - Script Codes
Ionic Infinite outside ion-content with ion-pane - Script Codes
Home Page Home
Developer Felquis
Username felquis
Uploaded December 08, 2022
Rating 3
Size 3,117 Kb
Views 16,192
Do you need developer help for Ionic Infinite outside ion-content with ion-pane?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Felquis (felquis) Script Codes
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!