Keep form data between different pages to display on last page

ionic-v1
1

I am trying to get the user to input data on the formDetails and to display it on the verifyForm page.

I can only view the data on the page i input the data using 

 {{fields.name}}

FORMDETAILS.HTML

<ion-view view-title="formdetails"  hide-nav-bar="true" class="eventForm">
  <ion-header-bar> <a href="" class="smallLogo button"></a>
    <h1 class="title">Welcome, Bruce Wayne</h1>
    <a ng-click="Logout()" class="power button"><i class="ion-power"></i></a> </ion-header-bar>
  <ion-content class="has-footer">
    <div class="list verifyForm">
      <div class="list" ng-controller="TabsCtrl">

      <a class="item item-icon-left" href="#"> <i class="icon ion-plane"></i> <input ng-model="fields.name" type="text" value="{{fields.name}}" placeholder="Enter Location" > </a>
      <a class="item item-icon-left" href="#"> <i class="icon ion-android-pin"></i> This is a test <pre> {{ fields.name }} </pre></a>
      <a class="item item-icon-left" href="#"> <i class="icon ion-android-calendar"></i> (Start Date Info) </a>
      <a class="item item-icon-left" href="#"> <i class="icon ion-android-calendar"></i> (End Date Info) </a>
      <a class="item item-ico
      n-left" href="#"> <i class="icon ion-ios-infinite"></i> (Repeat Info)</a>
      <a class="item item-icon-left notes" href="#"> <i class="icon ion-android-create"></i> (User Notes) </a>


      </div>
      <button class="button button-block btnEdit" ng-click="EventDetails()"><i class="ion-ios-compose-outline"></i> Edit</button>
    </div>
  </ion-content>
  <div class="bar bar-footer">
    <div class="padding">
      <button type="submit" class="button button-block btnSubmit">Submit</button>
    </div>
  </div>
</ion-view>

VERIFYFORM.HTML

<ion-view view-title="verifyform"  hide-nav-bar="true" class="eventForm innerHome">
  <ion-header-bar> <a href="" class="smallLogo button"></a>
    <h1 class="title">Welcome, (Username)</h1>
    <a ng-click="Logout()" class="power button"><i class="ion-power"></i></a> </ion-header-bar>
  <ion-content class="has-footer">
    <div class="row eventTab">
      <div class="col col-50">
        <div class="tabtext" ng-click="location()">
          <div class="icon"><i class="ion-android-pin"></i></div>
          <h3>Location</h3>
        </div>
      </div>
      <div class="col col-50">
        <div class="tabtext" ng-click="startendDate()">
          <div class="icon"><i class="ion-android-calendar"></i></div>
          <h3>Date</h3>
        </div>
      </div>
    </div>
    <div class="row eventTab">
      <div class="col col-50">
        <div class="tabtext" ng-click="notes()">
          <div class="icon"><i class="ion-android-create"></i></div>
          <h3>Notes</h3>
        </div>
      </div>
      <div class="col col-50">
        <div class="tabtext" ng-click="repeat()">
          <div class="icon"><i class="ion-ios-infinite"></i></div>
          <h3>Repeat</h3>
        </div>
      </div>
    </div>
    <div class="detailsForm" ng-controller="TabsCtrl">
      <!--<label class="item item-input item-icon-left"><i class="icon ion-plane"></i>
        <input type="text" placeholder="Enter vacation">
      </label>-->
      <label class="item item-input item-icon-left" id="location"><i class="icon ion-android-pin"></i>
        <input ng-model="fields.name" type="text" value="{{fields.name}}" placeholder="Enter Location" >
      </label>
      <div class="dateFromTo" id="dateFromTo">
        <label class="item item-input item-icon-left "><i class="icon ion-android-calendar"></i>
          <input ng-model="formData.startdate" placeholder="Start Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">
        </label>

        <label class="item item-input item-icon-left"><i class="icon ion-android-calendar"></i>
          <input placeholder="End Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date" >
        </label></div>
        <label id="repeat" class="item item-input item-icon-left"><i class="icon ion-ios-infinite"></i>
          <input type="text"  placeholder="repeat" value="No Repeat">
        </label>
        <label id="notes" class="item item-input item-icon-left textarea"><i class="icon ion-android-create"></i>
          <textarea name="" placeholder="Enter Note"></textarea>
        </label>
        <pre>
                {{ fields.name }}
            </pre>
    </div>
  </ion-content>
  <div class="bar bar-footer">
    <div class="padding">
      <button ui-sref="VerifyEvent" class="button button-block btnVerify">Verify</button>
    </div>
  </div>
</ion-view>

CONTROLLER.JS

.controller('TabsCtrl', function($scope) {

    // Store field data
    $scope.fields = {};

})

.controller('AnyTabCtrl', function($scope) {

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

})
2

If you want to share $scope between your views, they must be nested or your states must use same view.

3

Alternatively to @gmarziou’s response, you could also create a factory to share data between different controllers: https://stackoverflow.com/a/21920241

2 Likes
5

Took me a while to understand, but this worked for me. Thank you!

1 Like