Load data from web Api and bind using AngularJS with infinite scroll.
Step 1 : Create WebApi for Fetch data.
Web API will give output like below JSON format. We want to load data on scroll of a browser.
so in below json list highlighted in yellow color background will added in listview.
Httpget request Response in JSON
{
"GetTimeZoneResult": {
2 Import Iconic bundle JS.
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
3. Create Angular app, Model & factory.
angular.module('ionicApp', ['ionic'])
.factory('PersonService', function ($http) {
var BASE_URL = "http://localhost/msr/Common.svc/GetTimeZone";
// var BASE_URL = "http://api.randomuser.me/";
var items = [];
return {
GetFeed: function () {
return $http.get(BASE_URL).then(function (response) {
items = response.data.GetTimeZoneResult.lstTimezone;
return items;
});
},
GetNewUsers: function () {
return $http.get(BASE_URL).then(function (response) {
items = response.data.GetTimeZoneResult.lstTimezone;
return items;
});
}
}
})
.controller('MyCtrl', function ($scope, $timeout, PersonService) {
$scope.items = [];
PersonService.GetFeed().then(function (items) {
$scope.items = items;
});
$scope.loadMore = function () {
PersonService.GetNewUsers().then(function (items) {
$scope.items = $scope.items.concat(items);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
});
so we have created angular app & model and factory for load data on scroll.
Final HTML Page look like below
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Pull to Refresh</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<style type="text/css">
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
</style>
<script type="text/javascript">
angular.module('ionicApp', ['ionic'])
.factory('PersonService', function ($http) {
var BASE_URL = "http://localhost/msr/Common.svc/GetTimeZone";
// var BASE_URL = "http://api.randomuser.me/";
var items = [];
return {
GetFeed: function () {
return $http.get(BASE_URL).then(function (response) {
items = response.data.GetTimeZoneResult.lstTimezone;
return items;
});
},
GetNewUsers: function () {
return $http.get(BASE_URL).then(function (response) {
items = response.data.GetTimeZoneResult.lstTimezone;
return items;
});
}
}
})
.controller('MyCtrl', function ($scope, $timeout, PersonService) {
$scope.items = [];
PersonService.GetFeed().then(function (items) {
$scope.items = items;
});
$scope.loadMore = function () {
PersonService.GetNewUsers().then(function (items) {
$scope.items = $scope.items.concat(items);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
});
</script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Infinite Scroll</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item class="item-avatar" ng-repeat="item in items">
{{$index}}: {{ item.Text}} {{item.Value}}
</ion-list>
<ion-infinite-scroll on-infinite="loadMore()" distance="5%"></ion-infinite-scroll>
</ion-content>
</body>
</html>
you have to bind your list array from your webapi to angular scope variable.
No comments:
Post a Comment