"clear" button to clear all fields

ionic-v1
2

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.