Angular, display the chosen option within the text input field

Currently, I have a table with multiple columns and I am using Angular JS to display their values in various controls. For instance, I am using a Select/Option (multiple) to display column A, and I want to use another text box to display column B based on the selection made in the select/option control. Below is the code snippet:

Displaying Column A in Select (multiple):

<select multiple data-ng-model="selectedEmp" data-ng-options="o.emp for o in post.Emps" >
    <option value="SampleValue">Samplevalue</option>
</select>

Displaying Column B in a text box:

<input data-ng-model="selectedEmp.gender" type="text"  style="width:60px;"> </input>

The issue I am facing is that when the 'Multiple' attribute is not used in the select control, the gender value of the same record can be displayed in the text box. However, when 'multiple' is used, the text box does not show the selected current record.

I would appreciate any guidance on how to resolve this implementation challenge.

Thank you

Answer №1

When you use the select element without the multiple attribute, your data binding is to an object. For example, your selectedEmp could look like {"emp":1,"gender":"M"} (an object).

However, when you use the select element with the multiple attribute, your data binding is to an array. For instance, your selectedEmp might be something like:

[{"emp":1,"gender":"M"},{"emp":2,"gender":"F"}]
. Take note of the square brackets [].

Therefore, when using multiple, you also need to specify the index of the value you want to bind. It appears that you want to have input elements for multiple selected items from the select above.

One way to achieve this could be:

<input data-ng-model="s.gender" type="text" ng-repeat="s in selectedEmp" />

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

Can the function be executed without the need for ng-app?

After researching my AngularJS application, I discovered that having 2 ng-app tags in the html file means only the first one will be executed. In my code snippet below <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"> ...

Accessing an Accurate and Customized Menu Selection from an Old-School .ASP Loop Area

I am currently facing an issue with the note section in my form. Users with permissions can add information to a specific record, including deleting or editing their own notes. However, when I implemented a Jquery Modal Menu for confirming deletions, I enc ...

Is there a method to iterate through an HTML quiz in order to extract text from "label for" with the value of "true"?

I need assistance with extracting all the correct answers from a multiple choice radio button quiz. The correct answers are identified by the attribute value="true" in the HTML code. Is there a way to iterate through and retrieve the text of all the corr ...

How to ensure the priority of props.className in CSS-in-JS implementations

It is important for our components to prioritize the class passed as props over the default class. When passing classes as a prop, it is crucial for the component to give precedence to the class defined in its own file. Text.jsx // The following compo ...

I'm having trouble customizing the appearance of a Tab Panel using the TabsAPI. The panel keeps expanding in strange ways. How can I

Trying to customize the Tabs component from MUI is proving to be a challenge. The main issue I am facing currently is: Whenever I switch between tabs, they appear to expand in size mysteriously. This behavior seems to occur only on tabs with more content ...

Has anyone attempted to integrate AngularJS with Polymer's paper-dropdown-menu component?

Can I integrate this Polymer dropdown menu demo with AngularJS? https://www.polymer-project.org/components/paper-elements/demo.html#paper-dropdown-menu I've made attempts, but it's not working for me... <paper-dropdown-menu label="Ca ...

Maintain the state of various panels on page load with the Bootstrap Accordion feature

I have implemented a Bootstrap accordion on my form page which allows users to open multiple panels simultaneously. Upon submitting the form, I want to preserve the state of any open Bootstrap accordion panels. To achieve this, I utilized code from stack ...

Guidance on implementing a source map in a Node.js VM

Currently, I am analyzing JavaScript bundled source code in Node.js using the following snippet of code: const javascriptCode = "..." const javascriptSourceMap = "..." const wrapper = NativeModule.wrap(javascriptCode); const script = ne ...

Tips for choosing the remaining items in a multiple selection process

In my HTML form, I have a multi-select field that contains categories and the corresponding items within each category. My goal is to allow users to select individual courses or select an entire category (identified by values starting with "cat_") in orde ...

Encountering a problem with Axios get request error in React and Redux when communicating with a Laravel 5.2 API

Currently, I am utilizing react alongside redux and axios for handling asynchronous actions. The backend is powered by Laravel 5.2 API which is located on a subdomain, while React resides on the main domain. However, whenever I attempt to make an async GET ...

Exploring and modifying Angular objects using the Chrome console

While reviewing an Angular webpage, I came across an object named vm. Attempting to inspect it using console.log(vm) resulted in the following error: Uncaught ReferenceError: vm is not defined(…) Is there a different way for me to inspect this object? ...

Enhance the efficiency of DataTable by optimizing cell class modifications

I have been very pleased with the performance of jquery DataTables, but I have encountered a situation where I need to optimize it further. Specifically, I am updating the class of a cell based on its data. Currently, I am achieving this by using the ren ...

I'm having trouble posting ng-repeat Object data, I tried one method but it doesn't seem to be working

Is there a better way to post ng-repeat Object data? I've attempted the following method but it doesn't seem to be working. <body ng-controller="mainCtrl as MC"> <div> <div ng-repeat="(item,value) in MC.items"> {{it ...

What is the best method for adding a JSON array with objects to an already existing table?

After incorporating Bootstrap into my HTML file, I designed a basic table. To populate this table with data from an external JSON file upon clicking a button, I utilized XMLHttpRequest and JSON.parse successfully. However, I encountered difficulties when t ...

Eliminate the need for pressing the "tab" key on my website

I'm currently working on a horizontal web page layout and I'm looking for a way to disable the "tab" button functionality on my page. The issue arises because I have a contact form with textboxes located in the last div, and when users navigate u ...

Splitting Angular modules into separate projects with identical configurations

My Angular project currently consists of approximately 20 different modules. Whenever there is a code change in one module, the entire project needs to be deployed. I am considering breaking down my modules into separate projects for individual deployment. ...

NodeJs Importing a File

Currently working with NodeJS, I have encountered a challenge. Is it possible to require a JavaScript file in Node similar to how we do in browsers? When using the require() method, I noticed that the JavaScript file called does not have access to global v ...

How can I extract the id of a clicked item and pass it to a different page with Jquery?

Facing an issue where the attribute value of a clicked href tag is not retained after browser redirection. Initially, when clicking on the href tag, the value is displayed correctly. However, upon being redirected to the peoplegallery_album, the id becomes ...

Guide to creating a cryptosystem using a Synchronous Stream Cipher with Vue js

I am currently working with a pseudo-random number generator that creates binary numbers using a user-supplied polynomial and the LFSR method. To enhance the process, I need to convert a loaded file into binary format so that I can apply the XOR operatio ...

Storing Data in Session Storage Post Page Redirection (utilizing AngularJS Routing)

In my current setup, I am facing a situation where the login page will eventually transition to the SAML2 identity provider server upon successful authentication, followed by a redirection to another server hosting the main application. To facilitate test ...