Question

我已经尝试了很多东西来清除离子模态中的输入字段。已经有两天多的时间我一直在寻找解决方案。谁能为我提供解决方案？我只包括必要的部分。

controller.js

.controller('ClientCtrl', ['$scope', '$ionicModal', function($scope, $ionicModal) {

  //I have retrieved data form local storage 
  //$scope.clients contains the data

  //client add modal
  $ionicModal.fromTemplateUrl('templates/clientAdd.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.clientAdd = modal;
  });

  // Triggered in the client add modal to close it
  $scope.closeClientAddForm = function() {
    $scope.clientAdd.hide();
  };

  // Open the client add modal
  $scope.clientAddForm = function() {
    $scope.clientAdd.show();  
  };

}])

.controller('ClientAddCtrl', ['$scope', '$state', function($scope, $state) {

  //$scope.client = null;

   $scope.client = {};

   $scope.addClientData = function(clientData) {
     $scope.clientinfo = clientData;    
     //operation to store data

     /* $scope.clearForm = function() {
    var client = {
      companyName: "",
      address: "",
      contactName: "",
      contactEmail: "",
      contactPhone: "",
      shippingName: "",
      shippingAddress: ""
    }

    $scope.clientAddForm.$setPristine();
    $scope.client = angular.copy(client);   
  }*/
     $scope.closeClientAddForm(); 

  }

}])

模态

<ion-modal-view cache-modal-view="false" ng-controller="ClientAddCtrl">
  <ion-header-bar class="bar bar-dark">
    <h1 class="title">Client Details</h1>
    <div class="buttons">      
      <button class="button button-assertive" ng-click="closeClientAddForm()">Close</button>
    </div>
  </ion-header-bar>

  <ion-content>
    <form name="clientAddForm" ng-submit="addClientData(client)" novalidate>
      <ion-list>  
        <div class="padding item-divider">
          BILLING DETAILS
        </div>

        <label class="item item-input">
          <span class="input-label">Name <span class="style_error">*</span></span>
          <input name="companyName" type="text" ng-model="client.BillingDetails.companyName" required>
        </label>
        <p class="style_error" ng-show="clientForm.companyName.$dirty && clientForm.companyName.$invalid">Company name is required.</p>

        <label class="item item-input">
          <span class="input-label">Address 1 <span class="style_error">*</span></span>
          <input name="address" type="text" ng-model="client.BillingDetails.address" required>
        </label>
        <p class="style_error" ng-show="clientForm.address.$dirty && clientForm.address.$invalid">Address is required.</p>

        <label class="item item-input">
          <span class="input-label">Address 2 </span>
          <input name="address2" type="text" ng-model="client.BillingDetails.address2">
        </label>


        <div class="padding item-divider">
          CONTACT DETAILS
        </div>

        <label class="item item-input">
          <span class="input-label">Name <span class="style_error">*</span></span>
          <input name="contactName" type="text" ng-model="client.ContactDetails.contactName" required>
        </label>
        <p class="style_error" ng-show="clientForm.contactName.$dirty && clientForm.contactName.$invalid">Name is required.</p>

        <label class="item item-input">
          <span class="input-label">Email <span class="style_error">*</span></span>
          <input name="contactEmail" type="email" ng-model="client.ContactDetails.contactEmail" required>
        </label>
        <p class="style_error" ng-show="clientForm.contactEmail.$dirty && clientForm.contactEmail.$invalid">Enter a valid email</p>

        <label class="item item-input">
          <span class="input-label">Phone <span class="style_error">*</span></span>
          <input name="contactPhone" type="number" ng-model="client.ContactDetails.contactPhone" required>
        </label>
        <p class="style_error" ng-show="clientForm.contactPhone.$dirty && clientForm.contactPhone.$invalid">Phone is required.</p>

        <label class="item item-input">
          <span class="input-label">Mobile </span>
          <input name="contactMobile" type="number" ng-model="client.ContactDetails.contactMobile">
        </label>      

        <label class="item item-input">
          <span class="input-label">Fax </span>
          <input name="contactFax" type="number" ng-model="client.ContactDetails.contactFax">
        </label>

        <label class="item item-input">
          <span class="input-label">Website </span>
          <input name="contactWebsite" type="text" ng-model="client.ContactDetails.contactWebsite">
        </label>        


        <div class="padding item-divider">
          SHIPPING DETAILS
        </div>

        <label class="item item-input">
          <span class="input-label">Name <span class="style_error">*</span></span>
          <input name="shippingName" type="text" ng-model="client.ShippingDetails.shippingName" required>
        </label>
        <p class="style_error" ng-show="clientForm.shippingName.$dirty && clientForm.shippingName.$invalid">Shipping name is required.</p>

        <label class="item item-input">
          <span class="input-label">Address 1 <span class="style_error">*</span></span>
          <input name="shippingAddress" type="text" ng-model="client.ShippingDetails.shippingAddress" required>
        </label>
        <p class="style_error" ng-show="clientForm.shippingAddress.$dirty && clientForm.shippingAddress.$invalid">Shipping Address is required.</p>

        <label class="item item-input">
          <span class="input-label">Address 2 </span>
          <input name="shippingAddress2" type="text" ng-model="client.ShippingDetails.shippingAddress2">
        </label>


        <div class="padding item-divider">
          NOTES
        </div>

        <ion-item>
          <textarea placeholder="notes" name="shippingNotes" ng-model="client.notes" style="width:100%">     
          </textarea>        
        </ion-item>
      </ion-list>

      <button class="button button-block button-positive" type="submit" ng-disabled="clientAddForm.$invalid" >Add Client</button>

    </form>

  </ion-content>

</ion-modal-view>

Answer 1

请阅读并尝试以下链接。

https://forum.ionicframework.com/t/clear-button-to-clear-all-fields/12190

如何在离子的模态视图中清除数据

1 个答案: