0

One parent page I have an icon, clicking which a new modal window opens. In that window there's a drop-down list and the value selected from the drop-down should appear in the parent page text-box.

Parent page html:

<input type="text" id="editGroupName" class="form-control"
       style="width: 250px;" placeholder="Group Name"
       ng-model="srchDealer.groupId" />
<i class="glyphicon glyphicon-new-window"
   style="margin-top:10px; margin-left:10px; float:right; font-size:larger; cursor:pointer" 
   ng-click="createNewGroupModal()"></i>

Modal window html:

<select id="srchDealerGroup" ng-model="srchDealer.groupId"
        ng-options="gr.id as gr.name for gr in dlrGroups"
        style="width: 75%;" class="form-control">
    <option value="" selected>Select Group</option>
</select>

How do I bind the drop-down list value from the modal window with the text field in the parent window?

Simi
  • 3
  • 3
  • https://www.tektutorialshub.com/angular/angular-pass-data-to-parent-component/, as the article says, there a few way to accomplish this, using EventEmmiter or @ViewChild() – Progs Nov 01 '19 at 16:30
  • @B.J.A.A. The article that you cite is for Angular 2+. This question is for AngularJS. – georgeawg Nov 01 '19 at 17:17
  • Are you asking us to write your JS for you? How is the modal created? And does it have the same scope as the parent HTML? Keep in mind that modal dialogs can double error rates, increase time to task completion, and are near-universally despised by users. See [What research is there suggesting modal dialogs are disruptive?](https://ux.stackexchange.com/questions/12637/what-research-is-there-suggesting-modal-dialogs-are-disruptive). – georgeawg Nov 01 '19 at 17:23
  • @Leena in that case https://stackoverflow.com/a/37807353/2796268 – Progs Nov 01 '19 at 17:55

1 Answers1

0

Why cant we just do it with jQuery

$('#srchDealerGroup').change(function() {
  $('#editGroupName').val(this.val());

  // OR

  $('#editGroupName').val(this.val($('#srchDealerGroup').val()));
});
Atta H.
  • 661
  • 5
  • 11
  • MIxing jQuery with the AngularJS framework like this is asking for trouble. See [“Thinking in AngularJS” if I have a jQuery background?](https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background). – georgeawg Nov 01 '19 at 17:29
  • AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc. – georgeawg Nov 01 '19 at 17:30