Having trouble transitioning between pages in your mobile app using Onsen UI? Check out the code snippet below from my app.js file, which aims to share data between pages during the transition.
// Wordpress Posts Controller
var app = angular.module('myApp', []);
app.controller('PostsController', function($scope, $http, PostsData) {
$http({method: 'GET', url: 'http://akufoaddo2016.com/api/get_recent_posts/'}).
success(function(data, status, headers, config) {
$scope.posts = data.posts;
}).
error(function(data, status, headers, config) {
});
$scope.showDetail = function(index) {
var selectedItem = $scope.posts[index];
PostsData.selectedItem = selectedItem;
$scope.ons.navigator.pushPage('page4.html', selectedItem);
}
});
For displaying the data on 'page4.html,' you can refer to the following code:
<ons-page ng-controller="PostsController">
<ons-toolbar style="background-color: #132e42" >
<div class="left">
<ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="ion-android-more-vertical" style="color: #fff"></ons-icon></ons-toolbar-button>
</div>
<div class="center" style="font-weight:bold; color:#fff;">Nana Akuffu Addo</div>
</ons-toolbar>
<ons-scroller>
<div ng-app="myApp" ng-repeat="post in posts">
<ons-row >
<h3 class="title" ng-click="showDetail($index)">{{post.title}}</h3>
<p>{{post.excerpt}}</p>
</ons-row>
</div>
</ons-scroller>
</ons-page>
If you're facing issues with not being able to print any values, make sure to double-check your implementation. Also, here's an example of how your JSON data might look:
{
"count": 2,
"status": "ok",
...
}
Seeking some assistance or guidance for your development tasks? Feel free to ask!