我在html代码下方的下拉列表中填充值,如果用户更改下拉列表,我想使用ng-show并显示文本区域,以便用户可以输入注释,如何使用AngualrJS指令ng-change实现该注释。
到目前为止累了这个......
HTML
<form kendo-validator="ratingValidator" name="processRatingForm"
novalidate ng-cloak ng-controller="EditProcessRatingCtrl"
class="border-box-sizing grids-fonts">
<p class="status">{{PrcsratingValidationMsg}}</p>
<div class="row">
<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()"></select>
</div>
</div>
</div>
<div class="row" ng-show="OverrideComments">
<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" kendo-validator="overrideCommentValidator">
<textarea rows="2" class="form-control" required
data-required-msg="Business override justification is required"
ng-model="processRating.overallControlEffectivenessOverrideText"></textarea>
</div>
</div>
CTRL.JS
$scope.riskDirOptions = kendoCustomDataSource.getDropDownDataSource("RSDL_RSK_DIR");
$scope.riskBusinessOptions = kendoCustomDataSource.getDropDownDataSource("RSDL_RR");
$scope.ctrlEffOptions = kendoCustomDataSource.getDropDownDataSource("CTL_EFCTVNS_RT");
$scope.disableEffComp = true;
$scope.compReadOnly = true;
//Edit Function broadcast from parent Ctrl
$scope.$on('editProcessRating', function() {
$scope.showEditdisForm = true;
$scope.ProcessRatingWin.open().center();
if($scope.processRating.inherentRiskRatingKey === null || $scope.processRating.finalOutcomeInherentRiskRatingKey === null
|| $scope.processRating.controlEffectivenessRatingComputeKey === null) {
$scope.showEditdisForm = false;
$scope.PrcsratingValidationMsg = '*All Computed values are required*';
} else {
return true;
}
});
//Edit Save Functionality
$scope.saveProcessRating = function() {
Rating.saveProcessRating($scope.processRating).then(function(){
$rootScope.$broadcast("refreshRatingGrid");
$scope.ProcessRatingWin.close();
});
}
$scope.overrideBusinessDec = function() {
if (!($scope.processRating.controlEffectivenessRatingOverrideKey !==null)) {
$scope.OverrideComments = true;
} else {
$scope.OverrideComments = false;
}
};
$scope.closeModal = function() {
$scope.ProcessRatingWin.close();
};
答案 0 :(得分:0)
不完全确定你想要什么。但这是ng-change的简单实现
这是HTML
<select data-ng-model="valueSelected"
ng-options="opt as opt.label for opt in options" ng-change="handleChange()">
</select>
这是.js文件
app.controller('settingsCtrl',function($scope) {
$scope.handleChange = function(){
console.log(valueSelected);
}
});
每次下拉列表发生更改时,都会执行scope.handleChange。
并在您的HTML中尝试使用'ng-if'代替'ng-show'。
我不确定您在ng-change功能中声明的范围变量是否更新,如果需要,请尝试使用手表。
希望它有所帮助! :)