"clear" button to clear all fields

I have few fields in my app and a button in the footer to clear fields on click (ng-click).
my template is structured like

<ion-view title="Standard">
 
 <ion-content class="has-header" >
  <div class="list list-inset" ng-controller="calcController">
      <label class="item-input">
            <span class="input-label">Price</span>
            <input class="input-label" type="text" placeholder="$0.00">
          </label>
              
          <label class="item-input ">
            <span class="input-label">Discount</span>
            <input class="input-label" type="text" placeholder="$0.00">
          </label>
              
          
  </ion-content>

<ion-footer-bar align-title="left" class="bar-subfooter">
    <div class="button-bar">
        <a class="button clear" ng-click="clearFields()">Clear</a>
    </div>
</ion-footer-bar>
  

    
</ion-view>
  • I know that the button is out of the controller, but placing the same controller in the footer fails to retrieve the value of the field

  • and setting the controller on top most makes the calculation failed for the fields I have

  • placing the footer element withing the controller, breaks the style and the buttons aren’t in the footer.

any help?

Using Angular’s angular.element function you can gain access to the scope for the form fields within your calc Controller by calling the scope() method on your selected element. From there, you can then call your clearFields() function on said scope.

So, you might have something like…

Template:

<ion-view title="Standard">
  <ion-content class="has-header" ng-controller="calcCtrl">
    <form id="calcForm" name="calcForm" ng-submit="submitData(calculate)">
      <label class="item-input">
        <span class="input-label">Price</span>
        <input class="input-label" type="text" placeholder="$0.00" ng-model="calculate.price">
      </label>

      <label class="item-input ">
        <span class="input-label">Discount</span>
        <input class="input-label" type="text" placeholder="$0.00" ng-model="calculate.discount">
      </label>
    </form>
  </ion-content>

  <ion-footer-bar class="bar-stable">
    <div class="buttons pull-right">
      <button class="button button-positive" ng-click="resetForm()">Clear</a>
    </div>
  </ion-footer-bar>
</ion-view>

Controller:

.controller('calcCtrl', function($scope) {
  $scope.calculate = {
    price: "",
    discount: ""
  }

  var calcForm = angular.copy($scope.calculate)

  $scope.resetForm = function() {
    var formElement = document.getElementById('calcForm');
    var angularElement = angular.element(formElement)
    angularElement.scope().clearFields();
  }

  $scope.clearFields = function() {
    $scope.calculate = angular.copy(calcForm);
    $scope.calcForm.$setPristine();
  }
})

This should clear the form and set it to a pristine state for reuse.