Inserting an item into ng-model within a dropdown menu

I have a select box populated with data from my backend. This data is an array of objects:

 [Object { superkund_id="4", nod_id="12068", namn="Växjö Fagrabäck"}, Object { superkund_id="5", nod_id="9548", namn="Halmstad Bågen / Pilen"}]

I am using ng-options to generate the options in the select box:

<td><select class="form-control input-sm2" ng-model="selectedSupercustomer" ng-options="item.superkund_id as item.namn for item in superkundOptions" ng-change="onChangeSuperCustomer(selectedSupercustomer)" ><option value=''>Select</option></select></td>

Currently, I am capturing the selected option using onChangeSuperCustomer:

 $scope.onChangeSuperCustomer = function(selectedSupercustomer) {
           //console.log(selectedSupercustomer); 
        }

What I actually want is to pass the entire object related to the selected option so that I can access all its properties. How can I achieve this?

javascriptangularjs

Answer №1

One way to improve your ng-options is to bind the entire object item, rather than just superkund_id:

<td><select class="form-control input-sm2" ng-model="selectedSupercustomer" ng-options="item as item.namn for item in superkundOptions" ng-change="onChangeSuperCustomer(selectedSupercustomer)" ><option value=''>Select</option></select></td>

Answer №2

To make a change, simply include 'item' as an argument in the 'onChangeSuperCustomer' function

<select class="form-control input-sm2" ng-model="selectedSupercustomer" ng-options="item.superkund_id as item.namn for item in superkundOptions"
     ng-change="onChangeSuperCustomer(item)" >
 <option value=''>Choose</option>
</select>

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

I'm utilizing bootstrap to design a slider, but the length of the second div inside it is longer than the slider div

To ensure that the second div appears above the slide div, I applied position:absolute to the second div. Since the first div is a slider, nesting the second div inside it was not feasible. How can this issue be resolved? <div class="carousel slide"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can I correctly parse nested JSON stored as a string within a property using JSON.parse()?

I am having trouble decoding the response from aws secretsmanager The data I received appears as follows: { "ARN": "arn:aws:secretsmanager:us-west-2:0000:secret:token-0000", "Name": "token", "VersionId&qu ...

javascriptnode.js

Apply a CSS class when the tab key is pressed by the user

Currently in my Angular 14 project, I am working on a feature where I need to apply "display: block" to an element once the user reaches it using the tab key. However, I am struggling with removing the "display: block" when the user tabs out of the element ...

javascriptangulartypescript

In the realm of JavaScript, "this" is a key player when referring to an object within a factory

I created some JavaScript classes and FunctionFactories for them, but I believe there are errors in my implementation. To make the code more understandable, I decided to rename certain parts of it. The main class is called the "root"-class, which has chi ...

javascriptoopreferencethis

The click function for the parent div will not be executed if I click on the child div

Hey, I encountered an issue in my code that I need help with. $(document).ready(function() { $(document).on('click', '.rohit', function() { alert('rohit'); }) $(document).on('click', '.azad', ...

javascriptjqueryangularjs

Challenges with exporting dynamically generated divs using jspdf in an Angular 2 project

I have been utilizing the jspdf library to print div elements in my current project. But I recently discovered an issue where dynamic content within a div is not being printed correctly. Specifically, when incorporating simple Angular if statements, jspdf ...

javascripthtmlangulartypescriptjspdf

Node - ensure that each API call finishes before initiating the next one

Currently, I am encountering an issue with my POST request within the 'add-users' route. I have initialized an array named success and aim to trigger the next API call once a response is received. It seems that the problem lies in sending too ma ...

javascriptnode.jsasynchronous

JavaScript Firebase: Service worker malfunctioning during navigation

I'm currently developing a website that relies on firebase messaging. To make this happen, a specialized service worker for firebase has been integrated into the site. This website functions as a webchat platform where messages are synchronized and s ...

javascriptangular-ui-routerfirebase-cloud-messagingservice-worker

Having trouble rendering the response text from the API fetched in Next.js on a webpage

I've written some code to back up a session border controller (SBC) and it seems to be working well based on the output from console.log. The issue I'm facing is that the response comes in as a text/ini file object and I'm unable to display ...

javascripthtmlnode.jsreactjsnext.js

Strange anomalies arising in frontend Apollo and GraphQL integration

Currently, I am working with nuxt.js and apollo. One issue I am facing is that when I click a button, it sends a request to the graphql server. The strange part is that the first time I click the button, everything works as expected. However, when I clic ...

javascriptvue.jsgraphqlnuxt.jsapollo

Creating a Website for Compatibility with NoScript

During my journey of building a nameplate site from the ground up for myself, I have delved into the realms of learning and establishing my online presence. The highlight of my project is a sleek tabbed site that employs AJAX and anchor navigation to seaml ...

javascriptcsshtmlnoscript

Effortlessly uploading large files using axios

I am currently facing an issue and I am seeking assistance. My goal is to implement file chunk upload using axios, where each chunk is sent to the server sequentially. However, the requests are not being sent in order as expected. Below is a snippet of m ...

javascriptvue.jsvuejs2axios

Encountered an error while using JSON.parse(): `SyntaxError: Unexpected token in JSON at position 0`

As I embark on my Node.js development journey, I am faced with a challenge while trying to retrieve data from a JSON file. An error message interrupts my progress: SyntaxError: Unexpected token  in JSON at position 0 at Object.parse (native) Below is ...

javascriptjsonnode.js

Vue.js - The dissonance between data model and displayed output

Below is a simplified example of my issue: <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <script src="https://unpkg.com/vue/dist/vue.js"></script> ...

javascriptvue.js

What is the method for retrieving a JSON type object property that is stored inside a data object in a Vue template?

I am facing an issue with retrieving data from a Vue.js app object. data() { return { group1: { id: 'qd4TTgajyDexFAZ5RKFP', owners: { john: {age: 32, gender: 'man'}, mary: {age: 34, gender: 'wom ...

javascriptvue.jsobjecttemplates

Encountering an error while trying to add text: SyntaxError - Unexpected token 'for

I'm trying to print out the elements of an array using JavaScript. let listToArray = ["a","b","c"]; $(".tooltip").append(for(let i = 0; i < listToArray.length; i++) {listToArray[i]}); But I keep getting an error that says Uncaught SyntaxError: U ...

javascriptjquery

Personalized jQuery Slider with automatic sliding

I am currently working on creating my own image slider without relying on plugins. 1st inquiry : How can I achieve horizontal animation for the slider? 2nd inquiry : I want the images to cover both the height and width of their container while maintainin ...

javascriptjqueryhtmlcssslide

Setting a specific time for a div element with opacity: A step-by-step guide

Is there a way to adjust the timing for the appearance of the add-to-cart when hovering over the product-list-item? Currently, it appears when I hover over the item and disappears when I move my mouse away. .product-list-item { position: relative; w ...

javascripthtmlcss

Exploring the integration of Styled-components in NextJs13 for server-side rendering

ERROR MESSAGE: The server encountered an error. The specific error message is: TypeError: createContext only works in Client Components. To resolve this issue, add the "use client" directive at the top of the file. More information can be found here i ...

javascripttypescriptnext.jsstyled-componentsserver-side-rendering

Removing single quotes and replacing them with spaces when passing data from JavaScript to MySQL

I'm currently focused on JavaScript using Hapi.js in my role at the company. My main task involves retrieving data from MongoDB and transferring it to a MySQL database. The challenge arises when dealing with data that contains single quotes within th ...

javascriptmysql