如何在使用AngularJS更改下拉值时清除表单中的数据
How to clear the data in the form when dropdown value changed using AngularJS?
我使用的是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();
});
});
相关文章:
- 如何在使用AngularJS更改下拉值时清除表单中的数据
- 在Chrome中重新加载页面后清除表单输入值
- Angularjs:提交后清除表单无效
- 我无法使用 .reset() 清除表单
- 我无法从引导模式中清除表单数据
- 如何在我的create.js.erb中重置/清除表单
- 如何使用javascript删除项目和清除表单
- 当没有表单名称时,如何在AngularJS中清除表单
- 如何不清除表单jQuery中禁用的输入
- 使用 jQuery 重置/清除表单
- 提交 angularjs 后清除表单
- 在 cakephp 1.3 中提交后清除表单
- MVC 3 剃刀无法使用验证类清除表单值
- JavaScript -- 提交值后清除表单
- 如何编辑我的 js,以便在输出输出之前清除表单
- 提交后清除表单中的文本字段
- Chrome扩展-点击清除表单文本
- 提交时未清除表单
- 如何在验证后清除表单
- 单击运行清除表单的JS函数的按钮后,视图无法恢复