Passing data from one page to another one


#1

Hello,

I searched too much but couldn’t find a simple way to do this in Creator ionic2. Some people says $rootScope but a lot of people don’t suggest…

I really want to learn the easy way of;

Page A; 1 textbox and 1 button
Page B: 1 textbox

When in PageA, if I write HelloWorld to textbox, when I press button it will go to PageB and it will write HelloWorld in PageB’s textbox…

Please can you tell me the way of this?


#2

First, Creator does not yet support Ionic 2. Look at using NavParams to pass data from one page to another. For more global storage of the data look into using a factory or service. If you are using Ionic 2, factories and services have been replaced by providers.


#3

Page1
Textbox: ng-model textbox1
Button: ng-click ChangePage (textbox1)

Controller Page1
$scope.ChangePage = function(str) {
$state.go(‘menu.Page2’, {ParamValue: str});
};

In Page1 and Page2 define Route Parameters :
Param Name: ParamValue (Picuture)

Page2
console.log($stateParams.ParamValue);


#4

It worked! Thank you!


#5

Hi There,

I tried to get it working but did not work.

My Page1 looks like this:-

Code for Page1 is:-

// The following is the constructor function for this page’s controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams, $state) {

list=6;
name="item";

$scope.showDelete = false;
$scope.showReorder = false;

$scope.toggle=function(v){
    $scope[v] = !$scope[v];
}

$scope.delete = function(item){
    //This works
    $scope.items.splice($scope.items.indexOf(item), 1);
}

$scope.edit = function(item){
    //Not working
    //I created a separete page called 'Edit List'
    //I am trying to pass one item in the list to this page to edit the name
    alert('Editing '+$scope.items({name: name, id: list}));
    $state.go('editPage',{ParamValue: name});
}

$scope.reorder = function(item, fromIndex, toIndex){
   //This works
    $scope.items.splice(fromIndex,1);
    $scope.items.splice(toIndex, 0, item);
}

$scope.addChecklist = function(){
//This works
$scope.items.push({name: name, id: list})
list=list+1;
}

$scope.items=[
    //This works
    //At some point I would like to create a dynamic list instead of hard coding.
    {
        id: '1',
        name: 'Item'
        
    },
    {
        id: '2',
        name: 'Item'
    },
    {
        id: '3',
        name: 'Item'
    },
    {
        id: '4',
        name: 'Item'
    },
    {
        id: '5',
        name: 'Item'
    },
    ];

}

Then Page2 looks like this:-

With corresponding code for Page 2:-

// The following is the constructor function for this page’s controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {

console.log($stateParams.ParamValue);

}

The data is not displaying correctly on Page1 and is not displaying at all on Page2.

Anything obvious??