How to use ng-change of AngularJS? - javascript

I am populating values in dropdown in below html code , if user change dropdown i want to use ng-show and display text area so user can enter comments , How i can achieve that using AngualrJS directive ng-change.
So far tired this...
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();
};

Not exactly sure what you want. But this is a simple implementation of ng-change
Here is the HTML
<select data-ng-model="valueSelected"
ng-options="opt as opt.label for opt in options" ng-change="handleChange()">
</select>
Here is the .js file
app.controller('settingsCtrl',function($scope) {
$scope.handleChange = function(){
console.log(valueSelected);
}
});
The scope.handleChange will be executed every time there is a change in the dropdown.
and In your HTML try using 'ng-if' in place of 'ng-show'.
I am not sure if the scope variables you declared in the ng-change function are updated try to use a watch if needed.
Hope this will also help for your reference getting the ng-object selected with ng-change
hope it helps ! :)

Related

How can I include ng-model in autocomplete spring-boot?

In consultation mode I cannot return the dto values in the ng-model:
HTML code:
<div class="form-group">
<label class="col-md-5 control-label"> Localité </label>
<div class="col-md-7">
<autocomplete ng-disabled="mode == 'read'"
input-class="form control" options="referentielAdresses"
display-property="localite" on-type="autoCompleteLocalite"
on-select="get-localite" clear-input="false"
ng-model="dto.localite"></autocomplete>
</div>
</div>
https://imgur.com/iQMOvxk
JS code:
// autoCompleteLocalite
$scope.autoCompleteLocalite = function(typed){
if(typed!=""){
$scope.dto.localiteRnvp = typed;
}
};
$scope.getLocalite = function(selected){
$scope.dto.localiteRnvp = selected.localite;
}
How can I include ng-model midst autocomplete?
Em... in $scope.getLocalite search for relative rows and show them into new block. On click on row update localiteRnvp value.

How to hide field and use ng-model for Rest Service?

I have field that i want to hide permanently from the view but i want to use ng-model for Rest Service to do some calculation for other fields. How to achieve that task using AngularJS ?
So far tried code...
main.html
<div class="form-group col-md-6" ng-disabled="disableEffComp" ng-hide="true">
<div>
<label class="control-label" for="controlEffect">Overall
Control Effectiveness Computed</label>
</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.controlEffectivenessRatingComputeKey"
readOnly="compReadOnly" id="controlEffect">
</select>
</div>
mainCtrl.js
$scope.overrideBusinessDec = function () {
if ($scope.processRating.controlEffectivenessRatingComputeKey && $scope.processRating.controlEffectivenessRatingOverrideKey !== $scope.processRating.controlEffectivenessRatingComputeKey) {
Rating.getProcessRatingFields($scope.processRating.controlEffectivenessRatingOverrideKey, $scope.processRating.finalOutcomeInherentRiskRatingKey).then(function (response) {
$scope.processRating.residualRiskRatingComputeKey = response.data.residualRiskRatingComputeKey;
$scope.processRating.residualRiskRatingOverrideKey = response.data.residualRiskRatingComputeKey;
$scope.riskBusinessOptions = response.data.residualRiskOverride;
});
}
};

How add rows to select/dropdown dynamically in AngularJS

I have a select dropdown for returnreasons that is populated from DB. If user is in specific role he can add new reasons. The problem is that my model in dropdown is not updating automatically after adding? The adding goes to DB though, but in the view dropdown is not populated again even if the model has changed.
<select class="form-control" ng-model="selectedReason">
<option ng-selected="{{reason.returnreasonId === selectedReason}}"
ng-repeat="reason in returnreasons"
value="{{reason.returnreasonId}}">
{{reason.returnText}}
</option>
</select>
<div class="form-group form-group-lg" ng-show="addReasonToggle">
<label class="col-md-2 control-label">New reason:</label>
<div class="col-md-8">
<input type="text" class="form-control" ng-model="returnReason.returnText" placeholder="New reason for return">
</div>
<div class="col-md-2">
<button class="btn btn-small btn-primary" ng-click="addNewReturnReason(returnReason)">Lisää</button>
</div>
</div>
In controller
$scope.addNewReturnReason = function(returnReason){
var savedReturnReason = [];
if (returnReason === undefined || returnReason === null) {
console.log("returnReason null");
} else {
// This is default value
returnReason.languageLanguageId = $scope.languages[0];
savedReturnReason = returnReasonSvc.save({}, returnReason);
savedReturnReason.$promise.then(function (result) {
$scope.returnReason = result;
$scope.returnreasons = returnReasonSvc.query();
$scope.addReasonToggle = false;
$scope.selectedReason=savedReturnReason;
});
};
}
Could be a problem of watch cycle is not running you can try this in your then function..
$scope.$apply();
to run manually .hope so it will work .

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

I am using AngularJS ng-change directive, I want to clear the data in the form for some fields when ng-change invoke , how i can achieve this task using this approach.
So far i have tried below code...
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;
}
};
Since you're inside a promise result, you need to call $scope.$apply to make your changes effective.
Rating.getProcessRatingFields($scope.processRating.inherentRiskRatingKey, $scope.processRating.controlEffectivenessRatingComputeKey).then(function (response) {
$scope.$apply(function() {
$scope.processRatingFields = response.data;
$scope.resetData();
});
});

Add simple antispam operation in angularjs form

I have a input field like this :
<div class="form-group form-group-sm">
<label for="antispam" class="col-sm-2 control-label">1+1+5 = ?
<span class="myForm_error" ng-show="myFormZR.antispam.$error.required">(required field)</span>
<span ng-show="myFormZR.antispam.$dirty && IsMatch">BAD ANSWER</span></label>
<div class="col-sm-10">
<input type="text" class="form-control" name="antispam" placeholder="" required="required" ng-model="myForm.antispam" />
</div>
</div>
in ctrl :
/* antispam */
var antispamAnswer = "7"
if ($scope.myForm.antispam != antispamAnswer) {
$scope.IsMatch = true;
} else {
$scope.IsMatch = false;
}
It's not working, the mention "BAD ANSWER" is always show
Your code runs only once, when Controller is instantiated. You need put that code inside of $watch function for that ng-model:
$scope.$watch('myForm.antispam', function() {
// that code
})
Also do lots of console.log() to debug your code, so you know what and when is happening in your application.

Categories