How to keep input data between tab changes?

ionic-v1
1

I’m new to both ionic and Angular so forgive me if I’m missing something really obvious.

I have an app with three tabs, two of which have multiple inputs and display some information at the bottom based on the data in the inputs.

If I input some data in the first tab, then change to the second tab and then go back to the first tab, all data in the first tab is lost. Ideally, navigating back to the first tab would still show all previously inputted data.

You can see what I mean here:

It’s using the default tabs starter project but with a text input added to the dash page. If you add some text to the input, change to another tab and then change back, the input will be blank.

Seems like someone had a similar(ish) issue here:

and was advised to store $stateParams and then re-set it. Would I have to do something similar with the form data or is there a ‘proper’ way of doing this?

2

Cracked it!

For anyone wondering how to do this just add an object to the main tab scope and then save your input data inside that. Simple and works well.

.controller('TabsCtrl', function($scope) {
    
    // Store field data
    $scope.fields = {};

})

Then in your HTML:

<input ng-model="fields.name" type="text" value="{{fields.name}}">
<input ng-model="fields.age" type="text" value="{{fields.age}}">

Any data entered will be saved across tab changes and you can reference any field from any tab like so:

.controller('AnyTabCtrl', function($scope) {
    
    // Log fields
    $scope.$watch('fields', function( fields ) {
        console.log('"fields": '+JSON.stringify(fields, null, '\t'));
    }, true);

})
3

You may find creating a session cache useful in some cases.

Using something like Angular -Cache.

4

Also, you could use services to provide data from a central location