I am new to Ionic so my question might be basic. I am implementing an
application using tabs and lists. My navigation works for the first
time I load the application. i.e. I can click on the first 10 list items
and it navigates me correctly to a single page with some more details.
However upon loading more data using infinite scrolling, the
navigation fails to work properly from the 11th item to the rest I can
navigate but no details are displayed in the page I navigate to. Below
is my code so far.
In my controller
.controller('AllAdsCtrl', ['$scope', '$http', '$state', function ($scope, $http, $state) {
$scope.allads = [];
$http.get("http://locahost/android/getAdsForIonic.php")
.success(function(data){
$scope.allads = data;
console.log($scope.allads.length);
$scope.clickedad=$state.params.adId;
$scope.last = $scope.allads[$scope.allads.length-1].id;
//console.log($scope.last)
})
.error(function() {
$scope.allads = "error in fetching data";
});
console.log("out"+$scope.last)
$scope.loadMore = function() {
$http.get('http://localhost/android/getAdsForIonic.php?startHere='+$scope.last).success(function(items) {
console.log($scope.allads.length);
//console.log(JSON.stringify(items));
$scope.allads = $scope.allads.concat(items);
$scope.clickedad=$state.params.adId;
$scope.last = $scope.allads[$scope.allads.length-1].id;
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
}]);
In my route I have
.state('tab.detail', {
url: '/home/:adId',
views: {
'tab-home': {
templateUrl: 'templates/ad-detail.html',
controller: 'AllAdsCtrl'
}
}
})
In ad-detail.html I have
<ion-header-bar class="bar-positive">
<h2 class="title">Ad Information</h2>
</ion-header-bar>
<ion-view>
<ion-content class="padding">
<ion-list class="list-inset" ng-repeat="ad in allads | filter : {id : clickedad}">
<ion-item class="item-text-wrap">
<h2>Title : {{ad.title}}</h2>
<img ng-src="http://localhost/{{ad.image_path}}" width="100px">
<h2>Price : {{ad.price}}</h2>
<p>
<h3>Description : {{ad.description}}</h3>
</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>