How to prepopulate form field values from the model?

ionic-v1
1

I have an Ionic app that uses a Firebase back-end.

The user fills out a form field, which then gets saved to Firebase. That part is working fine.

However, when the user navigates back to the page with the form field, I want all the fields to prepopulate with the data she already entered. (But then the user can edit those values.)

Right now when she navigates back to that page all the fields are blank again.

View:
<pre>
<label class="item item-input">
        <span class="input-label">Temperature (F)</span>
        <input type="number" ng-model="date.temperature">
      </label>
</pre>

Controller:

$scope.date = {
      temperature: ‘’};

2

I’m building a fitness app, part of this involves entering your daily weight. The values entered are used throughout the app. I’m not sure if this will help you but I want to post in case it does. This snippet shows how you can increase and decrease the weight value which is set at a base of 90:

<ion-slide>
			                <h3>Weight</h3>
							<p>This morning I weigh:</p>
							<div class="row outputReading" style="margin-top:30px;">
							<div class="col col-25"></div>
							<div class="col col-50"><span style="font-size:8em;font-weight:800;">{{weight}}</span></div>
							<div class="col col-25"><span style="font-size:3em;font-weight:800;color:#A5EC49; margin-left:-15px;">kg</span></div>
							</div>
							<div class="row outputReading" style="margin-top:25px;">
							<div class="col"><span style="font-size:5em;font-weight:800; padding-right:10px; color:#ff51a3;" class="ion-plus" ng-click="weight = weight + 1" step="any"></span>
							<span style="font-size:5em;font-weight:800; padding-left:10px; color:#ff51a3;" class="ion-minus" ng-click="weight = weight - 1" step="any" ng-init="weight=90"></span></div>
							</div>
							
							
			            </ion-slide>
1 Like
3

I figured out my issues. I will describe the solution here for the benefit of future searchers.

First, I needed to implement 3-way data binding.

I used this code:

Auth.getCurrentUser().then(function() {
        console.log(Auth.currentUser[‘uid’]);
      }).then(function() {
          var dateRef = new Firebase(‘https://myapp.firebaseio.com/users/’ + Auth.currentUser[‘uid’] + ‘/’ + formattedDate);
          var sync = $firebase(dateRef);
          var syncObject = sync.$asObject();
          syncObject.$bindTo($scope, “date”);
          });
    }

Then I needed to upgrade to the latest versions of the Firebase and AngularFire libraries in order to take advantage of $asObject().

Now it is all synching nicely, although I would be lying if I claimed to understand how it all works.

1 Like