how to bind input fields to a modal input fields AngularJS
- by user3919120
I have a form with a Customer and its properties populating input fields. If the user needs to change the Customer they click on the CustomerName input. A modal opens with a Customer List for them to choose from. There selection populates the input fields in that modal. I need to have that new information put in the already populated input fields.
plunkr
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">C. Name</span>
<input style="width:400px" ng-model="currentItem.CustomerName" class="form-control btn btn-default" ng-click="editJobCustomerModal()" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">C. Address</span>
<input style="width:390px" ng-model="currentItem.CustomerAddress" class="form-control" type="text">
</div>
</div>
Modal
<div ng-controller="JobCtrl" data-backdrop="static" data-keyboard="false" class="modal fade" id="editJobCustomerModal" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class=" modal-dialog modal-editJobCustomer">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title custom_align" id="Heading">Change Job Customer</h4>
</div>
<div class="modal-body">
<div class="container">
<form ng-submit="submitJob()" enctype="multipart/form-data">
<fieldset>
<div class="col-md-8">
<!-- Prepended text-->
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">C. Name</span>
<input style="width:400px" ng-model="selectedCustomer.CustomerName" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">C. Address</span>
<input style="width:390px" ng-model="selectedCustomer.CustomerAddress" class="form-control" type="text">
</div>
</div>
</fieldset><br />
<input style="float:right" class="btn btn-danger" ng-click="" type="button" value="Update"/>
<input style="float:right; margin-right:20px" type="button" class="btn btn-primary" data-dismiss="modal" value="Cancel" />
</form>
</div>
</div>
</div>
</div>
</div>
