如何在使用AngularJS更改下拉值时清除表单中的数据

How to clear the data in the form when dropdown value changed using AngularJS?

本文关键字:清除 表单 数据 AngularJS      更新时间:2023-09-26

我使用的是AngularJS ng change指令,我想在ng change调用时清除表单中某些字段的数据,我如何使用这种方法来实现这项任务。

到目前为止,我已经尝试了以下代码。。。

HTML

<div class="form-group col-md-6" ng-show="showEditdisForm">
            <div>
                <label class="control-label" for="controlEffBusiness">Overall
                    Control Effectiveness Business</label>
            </div>
            <div>
                <select kendo-drop-down-list k-data-value-field="'id'"
                    k-data-text-field="'text'" k-option-label="'Select'"
                    k-data-source="ctrlEffOptions"
                    ng-model-options="{ updateOn: 'blur' }"
                    ng-model="processRating.controlEffectivenessRatingOverrideKey" ng-change="overrideBusinessDec(processRating.controlEffectivenessRatingComputeKey)"></select>
            </div>
        </div>
    </div>
    <div class="row" ng-show="OverrideComments" ng-class="{'has-error': processRatingForm.OverallBusComment.$dirty && processRatingForm.OverallBusComment.$invalid, 'has-success': processRatingForm.OverallBusComment.$valid}">
        <div class="form-group col-md-6">
                <label class="control-label" for="controlEffBusiness">
            Overall Control Effectiveness Business Comments</label>
        </div>
        <div class="col-md-10">
            <textarea rows="2" class="form-control" 
                ng-pattern="/^[a-zA-Z0-9_ ]*$/"
                required
                id="OverallBusComment"
                name="OverallBusComment"
                ng-model-options="{ updateOn: 'blur' }"
                data-required-msg="Overall Control Busniess comment is required"
                ng-model="processRating.overallControlEffectivenessOverrideText"></textarea>
        </div>
    </div>

CTRL。JS-

  $scope.resetData = function (){
            $scope.processRating.overallControlEffectivenessOverrideText = '';
            $scope.processRating.residualRiskRatingOverrideKey ='';
            $scope.processRating.residualRatingText = '';
          }
      $scope.overrideBusinessDec = function() {
            $scope.OverrideComments = true;
        if (!($scope.processRating.controlEffectivenessRatingOverrideKey == $scope.processRating)) {
            Rating.getProcessRatingFields($scope.processRating.inherentRiskRatingKey,$scope.processRating.controlEffectivenessRatingComputeKey).then(function (response){
              $scope.processRatingFields = response.data;
              $scope.resetData();
            })
        } else {
            $scope.OverrideComments = false;
        }
      };

由于您在promise结果中,因此需要调用$scope.$apply以使更改生效。

  Rating.getProcessRatingFields($scope.processRating.inherentRiskRatingKey, $scope.processRating.controlEffectivenessRatingComputeKey).then(function (response) {
      $scope.$apply(function() {
          $scope.processRatingFields = response.data;
          $scope.resetData();
      });
  });