I have a problem with adding new jsonp data to an existing array while loading more content near the bottom of the page. Instead of appending the new data, it replaces what's already there.
function AppCtrl($scope, Portfolio, $log, $timeout, $ionicSlideBoxDelegate) {
$scope.posts = [];
Portfolio.getPosts($scope);
$scope.refresh = function() {
console.log('Refreshing!');
$timeout( function() {
Portfolio.getPosts($scope);
console.log('Refreshed!');
//stop the ion-refresher from spinning
$scope.$broadcast('scroll.infiniteScrollComplete');
}, 1000);
};
//fetching jsonp data
function Portfolio($http, $log) {
this.getPosts = function($scope) {
$http.jsonp("http://test.uxco.co/json-test.php?callback=JSON_CALLBACK")
.success(function(result) {
$scope.posts = result;
$scope.$broadcast("scroll.infiniteScrollComplete");
});
};
}
Any suggestions on how to fix this issue?
Thank you!
Update:
$scope.posts.push(result);
The above solution seems to work but now the content isn't displaying correctly.
<div data-ng-repeat="p in posts">
<div class="img-container">
<img ng-src="{{ p.thumbnail }}">
</div>
<div class="title-container">
<h2>{{ p.id }}</h2>
</div>
</div>