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

Utilizing the no-data-text attribute in v-combobox with Vuetify: Tips and tricks

My application includes a simple combobox, and I am trying to set a default text message to display when there are no entries in the items props. To achieve this goal, I utilized the no-data-text prop by passing a specific variable to it. <v-combobox ...

javascriptvue.jsvuetify.js

Converting JavaScript code for Angular: A step-by-step guide

I have been working on integrating a feature similar to the one demonstrated in this Angular project: https://codepen.io/vincentorback/pen/NGXjda While the code compiles without any issues in VS code, I encountered two errors when attempting to preview it ...

javascriptangulartypescript

What is the best way to write an SQL query to safely insert a record into a table with a dynamic name?

I'm working on a function that can insert a record into a table in PostgreSQL. The catch is that the table name needs to be a parameter for the function, and the column names are determined dynamically. To ensure protection against SQL Injection, I am ...

javascriptsqlnode.jspostgresqlsql-injection

The slideshow feature on W3 Schools does not start automatically when the page loads

After following the W3Schools tutorial to create a slideshow, I found that the animations are working correctly. However, only three dots appear on the screen and I have to manually click on one of them to view the pictures. var slideIndex = 0; sh ...

javascripthtmlcss

The issue with Express connect-flash only showing after a page refresh instead of instantly displaying on the same page needs to be addressed

Here is the registration route code snippet: router.post("/register", function(req, res){ var newUser = new User({username: req.body.username}); User.register(newUser, req.body.password, function(error, user){ if(error){ req.fl ...

javascriptnode.jsmongodbexpressconnect-flash

What strategies can be utilized to manage a sizable data set?

I'm currently tasked with downloading a large dataset from my company's database and analyzing it in Excel. To streamline this process, I am looking to automate it using ExcelOnline. I found a helpful guide at this link provided by Microsoft Powe ...

javascriptexceltypescriptoffice-scriptsexcel-online

Mastering the correct application of both Express's res.render() and res.redirect()

After implementing a res.redirect('page.ejs');, my browser is displaying the following message: Cannot GET /page.ejs In my routes file, I have not included the following code structure: app.get('/page', function(req, res) { ...

javascriptnode.jsexpressrender

Passing state updates between child components by utilizing the useReducer hook and dispatching actions

Check out this interactive example on CodeSandbox with the code provided and highlighted linting issues: https://codesandbox.io/s/react-repl-bw2h1 Here is a simple demonstration of my current project setup. In a container component, there is an important ...

javascriptreactjsreact-reduxreact-hooksuse-reducer

Trouble getting CSS and JavaScript to function properly with HTTPS?

It seems that the css and js files are functioning properly on , but not on . As a novice in web design and javascript, I am struggling to find a solution to this issue. Trying to link the CSS file with "//isdhh.org/css/style.css" has not resolved the pr ...

javascriptcsshttps

Encountering the "ERR_FILE_NOT_FOUND" message within the popup of my Chrome extension

Currently, my manifest file is structured as follows: { "manifest_version": 2, "name": "My Extension", "description": "A starting point for creating a functional Chrome extension", "version": "0.0.1", "browser_action": { "default_popup": " ...

javascriptreactjsgoogle-chrome-extension

How do I automatically redirect to a different URL after verifying that the user has entered certain words using Javascript?

I want to create a function where if a user input on the "comments" id matches any word in my FilterWord's array, they will be redirected to one URL. If the input does not match, they will be redirected to another URL. The checking process should onl ...

javascriptjqueryarrayshttp-redirect

nodejs express routing issue resulting in not found error

I recently started a new node project and wanted to enhance my route adding capabilities. In the past, I only went one level deep with folders, but this time I wanted to go further. To achieve this, I created a recursive function that adds routes and navig ...

javascriptnode.jsrecursionexpress

Different approach in Vuejs for selecting target/currentTarget in a list

I have my current configuration set up as depicted below: [{ name: "test", tags: ["aa","bb","v"] }, ...] <div class="item" v-for="item in sdList" :data-id="item.id"> <span @click="deleteTag(item, $event)" v-for="tag in item.tags ...

javascriptvue.js

What is the best way to transfer information from a view to a controller in Laravel using AJAX?

I am facing an issue with sending data from the view to the controller in Laravel version 7 I am sending data from a form and ul li elements I have an array of data in JavaScript Here is my HTML code: <ul name="ali" id="singleFieldTags&q ...

javascriptarraysajaxlaravel

The loading of angular.min.js.map fails in Ionic

While running my Ionic app in the iOS simulator and using the Safari Web inspector, I encountered the following error: file:///.../.../Application/.../myApp.app/www/lib/ionic/js/angular.min.js.map Failed to load resource: The requested URL was not found o ...

angularjsionic-framework

Transmit an array of JavaScript objects using Email

Within the code layout provided with this post, I have executed various operations in JavaScript which resulted in an array of objects named MyObjects. Each object within MyObjects contains properties for Name and Phone, structured as follows: MyObject ...

javascriptphpjsonemailobject

Struggling to make Tumblr Javascript function properly

I have integrated the following code snippet: <script type="text/javascript" src="http://underlineent.tumblr.com/api/read/json"> </script> Unfortunately, my Tumblr blog is not appearing on this site. Can anyone provide assistance? The provid ...

javascripthtmljsontumblr

The Magic of Javascript Routing with Regex Implementation

I'm currently developing a Javascript Router similar to Backbone, Sammy, and Spin. However, my specific requirements are rather straightforward. I need the ability to define a series of routes along with their corresponding callbacks, and I want to be ...

javascriptajaxregexrouter

What is the method for configuring environment variables in the Lumber framework?

Installing Lumber CLI npm install -g lumber-cli -s Next, lumber generate "adminpanel_test" --connection-url "mysql://root@localhost:3306/admin-dev" --ssl "false" --application-host "localhost" --application-port "3310" Error: lumber is not recognized a ...

javascriptnpmforestadmin

What are the steps to troubleshooting using VS Code and Chrome browser with Webpack?

Can anyone provide guidance on how to debug webpack in VS Code with the Chrome browser? As a beginner in programming, I'm struggling because webpack minifies everything into one line which makes traditional debugging methods ineffective. I haven' ...

javascriptnode.jsdebuggingnpmwebpack