How do I pass a variable to child page?

ionic-v1
1

I’ve menu created with a list and ng-repeat.

I want to use a variable from an array of objects to create a child menu on another page (like in the Tabs starter Chat tab) but I’m using ui-sref and I can’t work out how to do it.

I’m not using any services btw.

2

I use
ion-item href="url"
ion-item ui-sref="url"
or
ion-item ng-click="name_of_function(data_to_send)"

3

Yes, you can by ‘n’ number of ways but what I prefer is that ->

1- first go to app.js file and define this line params: { varTest: null } varTest is variable which takes your data object and deliver you on the next page .

 .state('app.childPageName', {
        url: '/test/childPageName',
        params: { varTest: null },
        views: {
            'menuContent': {
                templateUrl: 'test/childPageName.html',
                controller: 'childPageNameCtrl'
            }
        }
    })

within ng-repeat sectioin ( or within ng-repeat DIV)
use this ui-sref=“app.PageNameYouWnatToSendObj ({varTest:ngRepeatObj})”

now go to the controller where you have sent the object ( PageNameYouWnatToSendObj ) and receive the object like this — >>

$scope.var = $stateParams.varTest;
console.log($scope.var);

• don’t forget to inject $stateParams as a dependancy.
• varTest is the name of variable which will carry your object from one page to another page.
•console.log will print the complete object which you have sent form last page.

feel free comment below if you have any question regarding that.

4 Likes
4

@Thesurya9 is giving you the best way.

1 Like
5

Brilliant.

I got it!

The next step is another programming issue that I’m probably too tired to work out!

I’m using if…else loops to create an array for the submenu, based on the passed variable. I’m wondering if Angular gives a better method?

Edit: Yeah, my method doesn’t work.

I was using ng-click to pass the variable to my if loops. The menu must be built beforehand though as it doesn’t work.

Any ideas?

6

Could you please provide me some code ?
it’s difficult to understand what you actually want to do ?

7

Forget it - it works. I was being stupid.

I used one controller for both the menu and the submenu so when I passed the variable… well, it wasn’t working.

I’ve moved all the submenu creation code to a new controller and it works great now - thanks so much!

This is what I’m doing to greate the objects for the submenu. The passed parameter determines what is in the submenu object that is iterated over by the ng-repeat.

.controller('SubmenuCtrl', function($scope, $stateParams){
  $scope.submenu = $stateParams.varPass;
  console.log($scope.submenu);

  if($scope.submenu.sref == 'submenu1'){
    $scope.menu = [{
        id: 0,
        title: 'Title 0',
        sref: 'ref0'
      },{
        id: 1,
        title: 'Title 1',
        sref: 'ref1'
      },{
        id: 2,
        title: 'Title 2',
        sref: 'ref2'
      }];
  }else if($scope.submenu.sref == 'submenu2'){
      $scope.menu = [{
        id: 0,
        title: 'Title 0',

I’m sure you get the idea :smile: It’s all very nice and so, so much easier than the old way I was doing it!

Now all I need is a way to creat the actual content from JSON that is pulled from localStorage.

The ultimate goal is have even these menus and submenus from JSON in localStorage. Then I can integrate with Firebase and have a fully updatable app that just polls Firebase for a change and, if it finds one, pulls a whole bunch of JSON that is used to construct the app. I didn’t think I’d ever be able to do this but what you’ve just shown me has made all the pieces fall into place!

:smile:

1 Like