in AngularJS I have scenario that the user selects a value from a grid in a popup and selected value is displayed in textbox in container page. After the user select a value, popup raises an event which is captured in container page. Now I can set the value of textbox using .val() but how do I update Model?
$scope.$on('rowSelectedInPopup', function (event: ng.IAngularEvent, ...data) {
if (elementId === data[1].toString()) {
$(elementId).val(data[0].toString());
$(elementId + "_inlinelbl").html(data[0].toString());
}
});
Here is my textbox and label html:
<input type="text" value="" id="ServiceManagerglookup" ng-model="Model.Person2.Name" />
<label id="ServiceManagerglookup_inlinelbl" ng-model="Model.Person2.Name">ABC</label>
Please note that textbox can bound with any arbitrary field in scope e.g. Model.AVC.XYZ.LMN
Besides changing the value you also need to inform Angular that a value changed using
$(elementId).trigger('input');
Like this
$scope.$on('rowSelectedInPopup', function (event: ng.IAngularEvent, ...data) {
if (elementId === data[1].toString()) {
$(elementId).val(data[0].toString());
$(elementId + "_inlinelbl").html(data[0].toString());
$(elementId).trigger('input');
}
});
Triggering of this input listener is normally done by the browser - so when you change the model directly you are forced to also trigger the event.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments