I've made a basic menu navigation with Ionic using ion-side-menus and an Angular state mechanism as described at http://joelhooks.com/blog/2013/07/22/the-basics-of-using-ui-router-with-angularjs/ but no content is showing up in the center section of the page when home is loaded or any of the menu's items are clicked. Here's the simplified HTML ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="testapp" ng-controller="MainCtrl">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-header">
<button class="button button-icon" ng-click="toggleSideMenu()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Home</h1>
<button class="button button-icon">
<i class="icon ion-star"></i>
</button>
</ion-header-bar>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-list>
<ion-item class="item item-icon-left" ng-repeat="item in menuItems" item="item" ng-click="enterState(item.id)">
<i class="{{item.icon}}"></i> {{item.name}}
</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
<script id="home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content padding="true">
<p>HOME</p>
</ion-content>
</ion-view>
</script>
<script id="page2.html" type="text/ng-template">
<ion-view title="Page 2">
<ion-content padding="true">
<p>PAGE 2</p>
</ion-content>
</ion-view>
</script>
<script id="page3.html" type="text/ng-template">
<ion-view title="Page 3">
<ion-content padding="true">
<p>PAGE 3</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
And here is the controller JS ...
angular.module('testapp', ['ionic'])
.config(function($urlRouterProvider, $stateProvider) {
"use strict";
/* Set up the states for the application's different sections. */
$stateProvider
.state('home', {name: 'home', url: '/home', templateUrl: 'home.html', controller: 'MainCtrl'})
.state('page2', {name: 'page2', url: '/page2', templateUrl: 'page2.html', controller: 'MainCtrl'})
.state('page3', {name: 'page3', url: '/page3', templateUrl: 'page3.html', controller: 'MainCtrl'})
;
})
.controller('MainCtrl', function($scope, $state, $ionicSideMenuDelegate) {
"use strict";
/* Items for left side menu. */
$scope.menuItems = [
{id: 'page2', name: 'Page 2', icon: 'icon ion-person-stalker'},
{id: 'page3', name: 'Page 3', icon: 'icon ion-person-stalker'}
];
$scope.toggleSideMenu = function() {
$ionicSideMenuDelegate.toggleLeft();
};
$scope.enterState = function(stateID) {
$state.transitionTo(stateID);
};
$scope.enterState('home');
$scope.$state = $state;
})
The correct URL shows up so I suppose the state mechanism is working properly but the Ionic content in the Angular templates isn't appearing. Can anyone more experienced with Ionic give me a hint what is wrong here?
SHORT ANSWER
You have at least two issues:
in controller you call $scope.enterState('home');. On other hand each state calls the same controller. Therefore you enter to the same state home.
Remove this line and add in config: $urlRouterProvider.otherwise('/home');
In HTML add <ion-nav-view class="slide-left-right"></ion-nav-view>
That's all.
Here is working Demo
WORKING CODE
HTML
<html ng-app="testapp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Login</title>
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-header">
<button class="button button-icon" ng-click="toggleSideMenu()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Home1</h1>
<button class="button button-icon">
<i class="icon ion-star"></i>
</button>
</ion-header-bar>
<ion-nav-view class="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-list>
<ion-item class="item item-icon-left" ng-repeat="item in menuItems" item="item" ng-click="enterState(item.id)">
<i class="{{item.icon}}"></i> {{item.name}}
</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
<script id="home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content padding="true">
<p>HOME</p>
</ion-content>
</ion-view>
</script>
<script id="page2.html" type="text/ng-template">
<ion-view title="Page 2">
<ion-content padding="true">
<p>PAGE 2</p>
</ion-content>
</ion-view>
</script>
<script id="page3.html" type="text/ng-template">
<ion-view title="Page 3">
<ion-content padding="true">
<p>PAGE 3</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
JS
angular.module('testapp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
"use strict";
/* Set up the states for the application's different sections. */
$stateProvider
.state('home', {name: 'home', url: '/home', templateUrl: 'home.html', controller: 'MainCtrl'})
.state('page2', {name: 'page2', url: '/page2', templateUrl: 'page2.html', controller: 'MainCtrl'})
.state('page3', {name: 'page3', url: '/page3', templateUrl: 'page3.html', controller: 'MainCtrl'})
;
$urlRouterProvider.otherwise('/home');
})
.controller('MainCtrl', function($scope, $state, $ionicSideMenuDelegate) {
"use strict";
/* Items for left side menu. */
$scope.menuItems = [
{id: 'page2', name: 'Page 2', icon: 'icon ion-person-stalker'},
{id: 'page3', name: 'Page 3', icon: 'icon ion-person-stalker'}
];
$scope.toggleSideMenu = function() {
$ionicSideMenuDelegate.toggleLeft();
};
$scope.enterState = function(stateID) {
console.log(stateID);
$state.transitionTo(stateID);
};
//$scope.enterState('home');
$scope.$state = $state;
})
Related
I have an ui-router structure:
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'menu.html',
})
.state('app.parent', {
url: '/parent',
views: {
'menuContent': {
templateUrl: 'parent.html',
}
}
})
.state('app.parent.next', {
url: '/next',
views : {
'next' : {
templateUrl: 'next.html'
}
}
})
parent.html contains ui-view and link to the app.parent.next
<ion-view view-title="Parent">
<ion-nav-buttons side="secondary">
<button class="button" ng-click="$state.go('app.parent.next')">
next »
</button>
</ion-nav-buttons>
<ion-content has-header="true">
<h1>Parent</h1>
<div ui-view></div>
</ion-content>
</ion-view>
It works just fine, however if I start the app directly in app.parent.next state the header and template are not there.
http://michalstefanow.com/ionic.html#/app/parent - works just fine
http://michalstefanow.com/ionic.html#/app/parent/next - next nested-view is loaded, it's just the ion-nav-buttons defined in the parent are not there
(provided link to hosted version because to reproduce it is essential to start in a nested state)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link data-require="ionic#1.2.4" data-semver="1.2.4" rel="stylesheet" href="https://code.ionicframework.com/nightly/css/ionic.css" />
<script data-require="ionic#1.2.4" data-semver="1.2.4" src="https://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script>
angular.module('starter', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'menu.html',
})
.state('app.parent', {
url: '/parent',
views: {
'menuContent': {
templateUrl: 'parent.html',
}
}
})
.state('app.parent.next', {
url: '/next',
views : {
'next' : {
templateUrl: 'next.html'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/parent');
})
</script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
<script type="text/ng-template" id="menu.html">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar style="background-color: transparent !important;">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/parent">
Parent
</ion-item>
<ion-item menu-close href="#/app/parent/next">
Directly into next
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script type="text/ng-template" id="parent.html">
<ion-view view-title="Parent">
<ion-nav-buttons side="secondary">
<button class="button" ui-sref='app.parent.next'>next »</button>
</ion-nav-buttons>
<ion-content has-header="true">
<h1>Parent</h1>
<h1>Parent</h1>
<h1>Parent</h1>
<div ui-view="next"></div>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="next.html">
<h1>Next</h1>
<h1>Next</h1>
<h1>Next</h1>
</script>
</body>
</html>
I've tried something similar with pure ui-router implementation:
http://michalstefanow.com/ui-router.html#/app/parent
http://michalstefanow.com/ui-router.html#/app/parent/child
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>UI Router</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script>
angular.module('starter', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'main.html',
})
.state('app.parent', {
url: '/parent',
views: {
'main': {
templateUrl: 'parent.html',
}
}
})
.state('app.parent.child', {
url: '/child',
templateUrl: 'child.html'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/parent');
});
</script>
</head>
<body ng-app="starter">
<div ui-view></div>
<script type="text/ng-template" id="main.html">
<h1>This is main.html</h1>
Below is:
<pre>ui-view="main"</pre>
<div ui-view="main"></div>
</script>
<script type="text/ng-template" id="parent.html">
<h1>Parent</h1>
<a ui-sref="app.parent.child">child »</a>
<div ui-view></div>
</script>
<script type="text/ng-template" id="child.html">
<h1>I am a child</h1>
</script>
</body>
</html>
Speculation guesstimate: somethingIonic specific due to caching - Template does not update when using ui-router and ion-tabs ?
What am I really trying to do? Just to avoid XY problem - https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem - I want guide a user to upload an image. There will be couple of steps and the user will land directly in state app.upload.one without touching app.upload directly. app.upload will keep the current state of the upload process, while each of the steps will add description, tags, etc...
I think that ionic is single page application,so there is just one parent (which is root,like tabs or menu),others all are the child,and specially important is that the others are all siblings,so they can't be the relation of parent and child.
In short,you only can use one dot notation like app.child , don't like app.child.grandchild which has two dot notations.
I am developing an Ionic based Android app. Here is the HTML markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<link href="css/ionic.app.css" rel="stylesheet">
<script src="js/app.js"></script>
</head>
<body ng-app="app">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content>
<p>This is Page 1</p>
<buton class="button button-positive" ng-click="gotoNextPage()">Go to Page 2</button>
</ion-content>
</ion-view>
</script>
<script id="page2.html" type="text/ng-template">
<ion-view view-title="page2">
<ion-content>
<p>this is page 2</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
...and following is the AngularJS code:
var app = angular.module('app', ['ionic', 'ui.router']);
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.state('page2', {
url: '/page2',
templateUrl: 'page2.html',
controller: 'Page2Ctrl'
});
$urlRouterProvider.otherwise('/');
});
app.controller('HomeCtrl', function($scope, $state) {
$scope.gotoNextPage = function() {
$state.go('page2');
};
});
app.controller('Page2Ctrl', function($scope, $ionicHistory) {
alert('hi');
});
Now, whenever I click on Go To page 2 button, the URL changes from
http://localhost/sample/index.html# to http://localhost/sample/index.html#/page2, but the page doesn't navigate, and if I type the URL manually the content of page 2 is not shown.
You can also work the navigation in HTML with the href
For example
<a class="button button-positive" href="#/page2">Go to Page 2</a>
Ok then I have made a codepen. I just changed the id to <script id="templates/home.html" type="text/ng-template"> and in the route also for both routes and pages and its working but I cannot explain why. Someone might help with explanation http://codepen.io/nabinkumarn/pen/PZgMwg.
Update:
codepen is working without the changing the id also. You might be using older ionic lib and ionicHistory might be undefined.
Use $location instead of $state:
HTML
<button class="button button-positive" ng-click="gotoNextPage('/page2')">Go to Page 2</button>
JS
app.controller('HomeCtrl', function ($scope, $location) {
$scope.gotoNextPage = function (path) {
$location.path("/page2");
}
};
Also, it's cleaner to move each view into it's own html file. So your directory structure could look like this:
www/
--- index.html
--- templates/
------- home.html
------- page2.html
Your index.html body would then be:
<body ng-app="app">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
And your page1.html can be:
<ion-content>
<p>This is Page 1</p>
<buton class="button button-positive" ng-click="gotoNextPage('/page2')">Go to Page 2</button>
</ion-content>
And page2.html:
<ion-content>
<p>this is page 2</p>
</ion-content>
In this case, your states would look like:
.state('home', {
url: '/',
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
.state('page2', {
url: '/page2',
templateUrl: 'templates/page2.html',
controller: 'Page2Ctrl'
});
I am new to AngularJs and Ionic, I am trying to follow this example to create simple app but it is just showing blank screen and there is no error on console log.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="bloggerDemo">
<ion-pane>
<ion-nav-bar class="bar-positive"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
</body>
</html>
latestPosts.html
<ion-view title="Latest Posts">
<ion-content>
<ion-list>
<ion-item ng-repeat="latestPost in latestPosts" class="item item-icon-right" sref="latestPosts.singlePost({post: $index})">
<span>{{latestPost.title}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
singlePost.html
<ion-view title="Single Post">
<ion-content padding='true'>
<h1>{{post.title}}</h1>
<section>{{post.description}}</section>
</ion-content>
</ion-view>
app.js
var app = angular.module('bloggerDemo', ['ionic'])
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/latestPosts')
$stateProvider.state('latestPosts', {
abstract: true,
url: '/latestPosts',
template: '<ion-nav-view></ion-nav-view>'
})
$stateProvider.state('latestPosts.index', {
url: '/latestPosts',
templateUrl: 'templates/latestPosts.html',
controller: 'PostsCtrl'
})
$stateProvider.state('latestPosts.singlePost', {
url: '/:singlePost',
templateUrl: 'templates/singlePost.html',
controller: 'SinglePostCtrl',
resolve: {
singlePost: function ($stateParams, PostService) {
return PostService.getPost($stateParams.post)
}
}
})
})
app.controller('PostsCtrl', function ($scope, PostService) {
$scope.latestPosts = PostService.latestPosts
})
app.controller('PostCtrl', function ($scope, singlePost) {
$scope.singlePost = singlePost
})
app.factory('PostService', function () {
var posts = [
{
title: 'lkad alkjdflak dfkljad f alkdsjf al',
description: 'adflkajd fjad faldfj aldkjf lkdfj lakdj flaksd flkds flksdj flkadlkfkhaghoiahd fkasdjkasdjfkl ajf sdjfalksdj falj falkf '
},
{
title: 'lkad alkjdflak dfkljad f alkdsjf al',
description: 'adflkajd fjad faldfj aldkjf lkdfj lakdj flaksd flkds flksdj flkadlkfkhaghoiahd fkasdjkasdjfkl ajf sdjfalksdj falj falkf '
}
];
return {
latestPosts: posts,
getPost(function (post) {
return latestPosts[post]
})
}
})
try changing this:
<ion-list>
<ion-item ng-repeat="latestPost in latestPosts" class="item item-icon-right" sref="latestPosts.singlePost({post: $index})">
<span>{{latestPost.title}}</span>
</ion-item>
</ion-list>
for this:
<ion-list>
<ion-item ng-repeat="latestPost in latestPosts" class="item item-icon-right">
<a ui-sref="latestPosts.singlePost({post: latestPost.post_id })">
{{latestPost.title}}
</a>
</ion-item>
</ion-list>
Hope this Help you...
after I read your code, I think I found the problem exist in your app.js
change this:
$stateProvider.state('latestPosts', {
abstract: true,
url: '/latestPosts',
template: '<ion-nav-view></ion-nav-view>'
})
to this:
$stateProvider.state('latestPosts', {
abstract: true,
url: '/latestPosts',
template: "/templates.index.html"
})
It is essential to note that the abstract state always point to where the <ion-nav-view> exist.
Tell me if it works, Happy Coding.
I am currently learning ionic and i am trying to create a basic app. My problem is when i click on the links in the app it doesn't change to the template in the link it only changes the URL.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</body>
</html>
app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
// states for each page
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/app');
$stateProvider
// main page that first loads, select region page
.state('app', {
url: '/app',
templateUrl: 'templates/regions.html',
controller: 'regionCTRL'
})
// EU page
.state('app.EU', {
url: '/EU',
views: {
'Regions': {
templateUrl: 'templates/EU.html',
controller: 'APICtrl'
}
}
})
// USCAN page
.state('app.USCAN', {
url: '/USCAN',
views: {
'Regions': {
templateUrl: 'templates/USCAN.html',
controller: 'APICtrl'
}
}
})
})
regions.html template
<!-- user can select which region they want to see -->
<ion-view view-title="Regions">
<ion-content>
<ion-list id="item">
<ion-item href="#/app/EU">
<p>EU</p>
</ion-item>
<ion-item href="#">
<p>ASPAC</p>
</ion-item>
<ion-item href="#/app/USCAN">
<p>USCAN</p>
</ion-item>
<ion-item href="#">
<p>EAGM</p>
</ion-item>
<ion-item href="#">
<p>LATAM</p>
</ion-item>
<ion-item href="#">
<p>CHINA</p>
</ion-item>
<ion-item href="#">
<p>INDIA</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
To change the state, the ui-sref directive is the correct way to go:
<ion-item ui-sref="/app/EU">
<p>EU</p>
</ion-item>
Few days back i had pushed my code to my repository you can get the idea form here.
Routing Menue
Defined State
Its required that you keep your snippets inside ionic-content like i did here
<ion-view title="courses" hide-back-button="true" left-buttons="leftButtons" right-buttons="rightButtons"
hide-back-button="true">
<ion-content has-header="true" padding="true">
----your elements----
</ion-content >
controller.js
.controller('FeedCtrl', function($scope, $http) {
var path = 'data/data.json';
var conditions = $http.get(path).then(function(resp) {
// $http.get('https://api.myjson.com/bins/147ny').then(function(resp) {
$scope.conditions = resp.data.employees ;
}, function(err) {
console.error('ERR', err);
// err.status will contain the status code
})
.controller('FeedDetailCtrl', function($scope, $stateParams ) {
$scope.condition = conditions.get($stateParams.feedId);
})
});
app.js
.state('tab.feed', {
url: '/feed',
views: {
'tab-feed': {
templateUrl: 'templates/tab-feed.html',
controller: 'FeedCtrl'
}
}
})
.state('tab.feed-detail', {
url: '/feed/:feedId',
views: {
'tab-feed': {
templateUrl: 'templates/feed-detail.html',
controller: 'FeedDetailCtrl'
}
}
})
;
tab-feed.html
<ion-view view-title="Chats">
<ion-content >
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right"
ng-repeat="condition in conditions" type="item-text-wrap"
href="#/tab/feed/{{condition.id}}">
<h2>{{condition.firstName}}</h2>
<p>{{condition.lastName}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
feed-detail.html
<ion-view view-title="{{condition.firstName}}">
<ion-content class="padding">
<p class="font-color">
{{condition.lastName}}
</p>
</ion-content>
</ion-view>
What i want is once i click on any of the option from the list and the next page should display the data available in the json file which belongs to the specific id.Thank you.
I recommend you follow the lesson Passing Data Between Controller from appcamp.io.
Also see next solution on play.ionic.io
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/page1.html" type="text/ng-template">
<ion-view view-title="Page 1">
<ion-content>
<h1>Page 1</h1>
<form ng-submit="submitForm(user)">
<ion-list>
<ion-item class="item-input">
<input type="text" ng-model="user.firstName" placeholder="First Name">
</ion-item>
<ion-item class="item-input">
<input type="text" ng-model="user.lastName" placeholder="Last Name">
</ion-item>
<ion-item class="item-input">
<textarea ng-model="user.comments" placeholder="Comments"></textarea>
</ion-item>
<input type="submit" class="button button-block button-positive" value="Submit">
</ion-list>
</form>
</ion-content>
</ion-view>
</script>
<script id="templates/page2.html" type="text/ng-template">
<ion-view view-title="Page 2">
<ion-content>
<h1>Page 2</h1>
<ion-list>
<ion-item>First Name: {{user.firstName}}</ion-item>
<ion-item>Last Name: {{user.lastName}}</ion-item>
<ion-item>Comments: {{user.comments}}</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
</body>
</html>
app.js
angular.module('app', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('page1', {
url: "/page1",
templateUrl: "templates/page1.html",
controller: "Page1Ctrl"
})
.state('page2', {
url: "/page2",
templateUrl: "templates/page2.html",
controller: "Page2Ctrl"
});
$urlRouterProvider.otherwise("/page1");
})
.controller('Page1Ctrl', function($scope, $state, formData) {
$scope.user = {};
$scope.submitForm = function(user) {
if (user.firstName && user.lastName && user.comments) {
console.log("Submitting Form", user);
formData.updateForm(user);
console.log("Retrieving form from service", formData.getForm());
$state.go('page2');
} else {
alert("Please fill out some information for the user");
}
};
})
.controller('Page2Ctrl', function($scope, formData) {
$scope.user = formData.getForm();
})
.service('formData', function() {
return {
form: {},
getForm: function() {
return this.form;
},
updateForm: function(form) {
this.form = form;
}
}
})