使用AngularJS重新設置表單提交時的默認選擇字段

Question

我有一個使用AngularJS創建的表單。該表格是一種可連續多次提交的問卷類型表格。該表單是文本區域和下拉選擇字段的混合。

表單有很多問題，每次提交表單時都需要重置爲默認值。

我設法清除使用$ setPristine（）的文本區域但下拉場不休息爲默認值 - 它們當表單提交，你再次重溫形式逗留先前選擇。如何重置表格上的所有字段 - 包括下拉列表選擇？我不想單獨重置每個字段，因爲正如我所提到的，每個表單可能有大量問題，而且手動重置每個問題的效率會很低。

下面是我的表單中的一小視圖

<div ng-controller="FormController" data-ng-init="init()"> 
    <ons-page> 
     <!-- Form Start --> 
      <form class="questionnaire-form" name="myForm" novalidate> 
       <section class="form-section"> 
        <ons-row> 
         <ons-col> 
          <p class="form-header">Header 1</p> 
         </ons-col> 
        </ons-row> 
        <ons-row> 
         <ons-col> 
          <p class="form-field-text"> 
           <span style="color: #f76327">*</span> Outcome 
          </p> 
         </ons-col> 
        </ons-row> 
        <ons-row> 
         <ons-col width="90%"> 
          <select id="outcome" name="outcome" 
            ng-model="severity.desc" 
            ng-options="severityOption.desc as severityOption.desc for severityOption in severity" 
            ng-change="changedValue(severity.desc, 'Severity')"> 
           <option value="" label="-- Please Select --"></option> 
          </select> 
         </ons-col> 
        </ons-row> 

        <ons-row> 
         <ons-col> 
          <p class="form-field-text"> 
           <span style="color: #f76327">*</span> PICW 
          </p> 
         </ons-col> 
        </ons-row> 
        <ons-row ng-hide="toggle"> 
         <ons-col width="90%"> 
          <textarea class="textarea" 
             rows="1" 
             placeholder="PICW" 
             ng-model="picw"></textarea> 
         </ons-col> 
        </ons-row> 
       </section> 

       <section var="saveBtn" ng-click="submitForm()">Submit</ons-button> 
       </section> 
      </form> 
     </ons-scroller> 
    </ons-page> 
</div> 

我控制器正在處理用戶提交的價值觀和按預期工作。然後，當用戶提交表單時，我會觸發用於將數據發送到服務器的submit（）函數，並將該數據設置爲pristine。但是，下拉選擇值不會重置。

我的觀點控制器

var formController = angular.module("formController ", []); 
formController .controller("FormController", function ($scope, FormField) { 
    var init = function() { 
     document.addEventListener("deviceready", onDeviceReady, false); 
    }; 

    init(); 

    function onDeviceReady() { 
     // Set severity drop down value 
     $scope.severity = FormField.getSeverity(); 
    }; 

    // Save details to database 
    $scope.submitForm= function() { 
     // Do form submit action here 

     // Set form pristine 
     $scope.myForm.$setPristine(); 
    }; 
}); 

而且我會爲如下形式下拉列表中選擇創建的值。

var formFields = angular.module("formField", []); 
formFields.service("FormField", function() { 
    // Severity 
    var Severity = [ { 
     desc: "Insignificant", id: "0" 
    }, { 
     desc: "Minor", id: "1" 
    },{ 
     desc: "Moderate", id: "2" 
    }, { 
     desc: "Major", id: "3" 
    }, { 
     desc: "Catastrophic", id: "4" 
    }]; 

    return { 
     // Get severity 
     getSeverity: function() { 
      return Severity; 
     }, 
    }; 
}); 

Answer 1

創建scope severity副本爲variable original。

然後，當復位設定$scope.severity到original variable

$scope.severity= angular.copy($scope.original);這種形式重置爲舊數據。

下面是代碼：

var formController = angular.module("formController ", []); 
formController .controller("FormController", function ($scope, FormField) { 
    var init = function() { 
     document.addEventListener("deviceready", onDeviceReady, false); 
    }; 

    init(); 

    function onDeviceReady() { 
     // Set severity drop down value 
     $scope.severity = FormField.getSeverity(); 
     $scope.original = $scope.severity; 
    }; 

    // Save details to database 
    $scope.submitForm= function() { 
     // Do form submit action here 

     // Set form pristine 
     $scope.severity= angular.copy($scope.original); 
     $scope.myForm.$setPristine(); 
    }; 
});