Tips on connecting input fields to a modal in AngularJS

My form is set up with a Customer and its properties populating input fields. When the user needs to change the Customer, they click on the CustomerName input which triggers a modal to open with a Customer List for selection. The chosen selection should then update the input fields in that modal as well as the already populated input fields in the main form. 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>
javascriptangularjs

Answer №1

Issue resolved! The correct code can be found in the following Plunkr: Plunkr

<body ng-app="TestApp">
 <div ng-controller="JobCtrl">
<div ng-repeat='currentItem in customers'>
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon">C. Name</span>
      <input ng-model="currentItem.CustomerName" class="form-control btn btn-default"     ng-click="editJobCustomerModal($index)" />
    </div>
  </div>
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon">C. Address</span>
      <input type="text" ng-model="currentItem.CustomerAddress" class="form-control" />
    </div>
  </div>
</div>
<div 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="" 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 type="text" ng-model="selectedCustomer.CustomerName" class="form-control" />
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <span class="input-group-addon">C. Address</span>
                    <input type="text" ng-model="selectedCustomer.CustomerAddress" class="form-control" />
                  </div>
                </div>
              </div>
            </fieldset>
            <br />
            <input type="button" style="float:right" class="btn btn-danger" ng-click="" data-dismiss=modal value="Update" ng-go-click="#" />
            <input type="button" style="float:right; margin-right:20px" class="btn btn-primary" data-dismiss="modal" value="Cancel" ng-go-click="#" />
          </form>
        </div>
      </div>
    </div>
  </div>
</div>


  app.controller('JobCtrl', function ($scope, $rootScope) {
  //Modal for Edit JobCustomer
   $scope.customers = [
    {'CustomerName':'Name1','CustomerAddress':'addy1'},
    {'CustomerName':'Name2','CustomerAddress':'addy2'}
  ];

 $scope.editJobCustomerModal = function (item) {
   $scope.selectedCustomer = $scope.customers[item];
    $('#editJobCustomerModal').modal();

 };
 });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing synchronous animations in Jquery with callback logic

My jQuery plugins often rely on user-defined callbacks, like in the example below: (function($) { $.fn.myplugin = function(options) { var s = $.extend({}, options), $this = $(this); if (typeof s['initCallback'] = ...

javascriptjquerypluginsanimationsynchronous

The tally of seconds within a year has been altered

I have developed a function that converts inputted seconds into an output format of Years, Days, Hours, Minutes, and Seconds for the user. While I am still refining the various outputs and improving the syntax, I am currently focused on identifying a calcu ...

javascriptarraysnode.jsmathtime

Newbie in Web Development: What is the best way to transfer a complicated object between different PHP files?

As a native application developer primarily working with C++, I have unexpectedly found myself involved in a small business coding project for a friend. While I am accustomed to self-contained native applications, I am facing a challenge on this new projec ...

javascriptphpjsonajaxserialization

Why does my jQuery.get() callback function not execute?

After implementing the code below, I expected to see 'hi mom' displayed between the <div id='job-status'></div> on the original page. However, the result is not as anticipated: $(function () { function show_status() { ...

javascriptjqueryruby-on-rails-3jsoncallback

What's the best way to switch between colors in a Vue list?

I have a custom tree-view component that I'm working on: <template> <li class="main__li list" :style="{'margin-left': `${depth * 20}px` ,'background-color': `${col}`}" @click="toggle(e); getEl( ...

javascriptvue.jsvuejs3

Customizing the appearance of pagination numbers in ReactJS by altering their color

I am currently working on a pagination ReactJS App. Check out the app here: https://codepen.io/claudio-bitar/pen/VERORW One specific feature I would like to implement is changing the color of the current page number in the pagination. For example, if th ...

javascriptreactjs

Order of Execution

I am facing an issue with the order of execution while trying to retrieve values from my WebApi for input validation. It appears that the asynchronous nature of the get operation is causing this discrepancy in execution order. I believe the asynchronous b ...

javascriptvisual-studiotypescriptangular

Generating an Asynchronous Observable using an array within a service and displaying the results in the template

I am currently developing a geolocation application, where users' locations are captured and stored in an array called "nearme" using Firebase. The intention is to convert this array into an observable for real-time updates on nearby users in the app& ...

javascriptangulartypescriptionic2rxjs

The ng-repeat function is not functioning effectively

Recently, I started working with AngularJS and encountered an issue that I can't seem to resolve. Despite trying several solutions from different sources, none of them have been successful. Within my code, I have an array assigned to $scope.data_para ...

javascriptangularjs

Disabling the submit button on an MC form - step by step guide

In order to create a multiple-choice question with radio buttons, each question must have only one answer choice. Each question should provide three options for the user to select from. It is necessary to validate whether the user has answered every questi ...

javascriptjquery

The message vanishes upon refreshing the page

I've developed a socket.io web app. When I click on the button to send a message, the message appears briefly but disappears when the page refreshes unexpectedly. How can I prevent this random refreshing and ensure that socket.io saves my messages? B ...

javascriptnode.jssocket.io

Display a hoverable button for a singular element within an array during the process of mapping through the array

const ChatWidget = () => { const bodyRef = useRef(null) const [{messages,roomMessages,roomID,socket,user}, dispatch] = useStateValue() const [dropdown, setDropdown] = useState(false) useEffect(()=>{ const setScreen = () =>{ bodyRef.cur ...

javascriptreactjsjsx

The AJAX call was successful with a return code of 200, however an error

HTML code snippet: <a href="javascript:void(0)" onclick="$.join_group(<?=$USER_ID?>, <?=$groups[$i]["id"]?>)"><?=$language["join"]?></a> JavaScript function: $.join_group = function(user_id, group_id) { var input = "u ...

javascriptjqueryajax

Wait for each observable subscription to complete

In my scenario, I have an array called orderCodes, which stores specific order codes. With each code, I can retrieve the corresponding order details, where each order contains multiple products. My goal is to extract the code of each product from the order ...

javascriptangulartypescriptforeachobservable

Leveraging gulp-data to incorporate JSON data into Nunjucks templating

I am looking to incorporate JSON data into nunjucks "set". Here's a simple example: index.html {% set divname='foo' %} {% include 'template.nunjucks' %} template.nunjucks <div class="{{divname}}"></div> Everything ...

javascriptjsonnunjucksgulp-datagulp-nunjucks-render

Tips for vertically aligning arrows in slick slider in relation to the image with text below

As shown in the image, my arrows are positioned at the top 50% relative to the height of the slide container. [1]: https://i.sstatic.net/DjEZh.png ...

javascriptcssslick.js

What could be the reason a normalMap fails to render accurately while utilizing THREE.SubdivisionModifier?

When attempting to render a 'soft' cube with a normal map, I encountered an issue. Despite not receiving any errors or warnings while running the code, adding the normal map parameter resulted in a black object when refreshing the browser. Removi ...

javascriptthree.js

What is the best way to expand a Modal in Bootstrap 4?

Initially, I am facing an issue with Object-Oriented Programming in javascript, and my understanding of it is quite limited. However, I urgently need to resolve this problem... Currently, I am attempting to utilize a library designed for Bootstrap 3 withi ...

javascriptooptwitter-bootstrap-3bootstrap-modalbootstrap-4

Guidelines for positioning an object to float in the bottom right of a separate tag

I am trying to position an image at the bottom right of a parent div. The CSS solution I found from another answer did not work as expected, so I had to use JavaScript to achieve the desired result. Is there a way to do this without using JavaScript? (Pl ...

javascripthtmlcss

Wait to fade in until the fade out process is completely finished

When I click on a button, the old box fades out and the new box fades in. However, I want to ensure that the .fadeIn() only happens once the .fadeOut() is complete. This will prevent two containers from being displayed simultaneously. Any suggestions on ...

javascriptjqueryjquery-uifunctionfade