Clear the textfields or ng-model in $ionicModal

ionic-v1
1

Hello!

I’m using the $ionicModal Service to update a content of an ion-item. If I update the textfield in the modal to something else and click the Cancel button, the textfield doesn’t revert back to the current entry that is still in the ion-item. Instead it contains the updated data in the textfield. But I never saved it.

My modal template looks like this:

<ion-modal-view>
  <ion-header-bar>
    <h1 class="title">Update This Entry</h1>
        <div class="buttons">
           <button class="button button-clear" ng-click="cancelUpdateForm()">Cancel</button>
       </div>
   </ion-header-bar>
  <ion-content>
   <form name="updateForm" ng-submit="updateItemForm(toUpdateItem)">

      <div class="list">
           <div class="item item-input" style="padding: 6px 16px 5px">

                  <input type="text" ng-model="toUpdateItem" maxlength="35" required/>
                  <span ng-if="toUpdateItem.length > 0" ng-click="clearText()" class="icon ion-close"></span>
           </div>
       </div>

  <div class="padding">
    <button ng-disabled="updateForm.$invalid" type="submit" class="button button-block button-balanced">Update</button>
  </div>
</form>
 </ion-content>
</ion-modal-view>

Inside the controller, I globally define the modal

$ionicModal.fromTemplateUrl('templates/updateShoppingListItem.html', {
       scope: $scope,
        focusFirstInput: true
 }).then(function(modal) {
     $scope.updateShoppingListItem = modal;
     $scope.toUpdateItem = ''; // set to the modal's ng-model
});

I use the IonOptionButton to update the entry in ion-item:

<ion-option-button class="button-calm" ng-click="updateEntry(shopping)">
        Update
</ion-option-button>

The updateEntry(shopping) method is declared in my controller as follows:

$scope.updateEntry = function(entry) {
   // entry is an object that has item and id properties (entry.item, entry.id). The item property is the one that gets to be updated.
    $scope.toUpdateItem = entry.item;

    $scope.updateShoppingListItem.show();

    $ionicListDelegate.closeOptionButtons();
};

So if shopping.item contains the data “ABC” and then I click the IonOptionButton to update the entry, the modal’s textfield has “ABC”. This part is good because this is the intention. But if I update it to “ABC123” AND then click the modal’s cancel button, I’m intending for this modal’s textfield to still contain “ABC” because I haven’t saved “ABC123.” But if I open the update modal again, “ABC123” is there even when I clicked the modal’s cancel button.

The `cancelUpdateForm()’ is declared in the controller like this so it doesn’t update the $scope.shopping at all. It just hides the modal.

$scope.cancelUpdateForm = function() {
    $scope.updateShoppingListItem.hide();
};

I’ve tried saving the previous data to a non-$scope global variable. I console.log it and “ABC” is there. But the textfield in the model doesn’t show “ABC” but it shows “ABC123”

I hope I explained this right. If not, please let me know so I can update this entry ASAP.

2

Could you put this in a codepen?

3

Hi @brandyshea

Here’s the codepen: http://codepen.io/junerockwell/pen/VYNOJa

To simulate:

  1. Slide any of the rows and click “update.” A modal should pop-up.
  2. Modify what’s in the textfield then click “Cancel.”
  3. When the modal has closed, the row still contains the same data because the altered data in the modal’s textfield wasn’t saved.
  4. Open up the modal again on the same row. Notice that the modified data is there yet the data in the row hasn’t changed.

I would like the textfield in the modal to have the same data that’s in the row every time I open it. So whatever text is in the row should be the value of the textfield in the modal.

Thanks!

4

In your javascript, remove .item on $scope.updateEntry

                           vvvvv
$scope.toUpdateItem = entry.item;

And update the template:

                                         vvvvv
<input type="text" ng-model="toUpdateItem.item" maxlength="35" required/>
5

sorry forget to hit send on this from yesterday http://codepen.io/aaronksaunders/pen/YPMbmW?editors=001

1 Like
6

I figured it out. Thanks to @aaronksaunders’s CodePen. Even though his CodePen isn’t exactly the same as mine, there were things in it that were suggestive enough. My guess of why mine didn’t work as intended is because of JavaScript reference.

So I made a new CodePen from the original one and modified to work. For anyone who wants to know,
here’s the old one: http://codepen.io/junerockwell/pen/VYNOJa?editors=101 and this is the new one: http://codepen.io/junerockwell/pen/azrWOK?editors=101

Thanks everyone.

1 Like