Using AngularJS to filter options in a dropdown list and trigger a function with ng-change

I have a dropdown menu that is being formatted using filters to display the text in a certain way. I need to send the selected item's ID value to the controller instead of just the name:

<select 
                ng-model="my_field" 
                ng-options="q.name as (q.name | filter1 | filter2) for q in my_fields track by q.id"
                ng-change="controllerMethod(my_field)"
                required>
                </select>

// Controller
    function controllerMethod(selected_field){
       console.log(selected_field);
    }
    $scope.controllerMethod = controllerMethod;


// Filters
    angular.module('app')
        .filter('filter1', function(){ 
            return function(str_value) {
                return str_value ? str_value.split('_').join(' ') : "";
            }
        })

        .filter('filter2', function(){ 
            return function(str_value) {
                return (!!str_value) ? str_value.charAt(0).toUpperCase() + str_value.substr(1).toLowerCase() : '';
            }
        })

Previously, without the filters, all object data was being sent to the controller. Now, only the name is being passed. How can I pass the ID of the selected object instead?

Thank you!

Answer №1

I suggest updating your ng-options to the following:

ng-options="q as (q.name | filter1 | filter2) for q in my_fields track by q.id"

The current setup you have causes the track by expression to result in q.name.id, which may lead to undefined behavior. By making the modification above, it should instead evaluate to q.id, aligning with your intended outcome. Feel free to reference this jsfiddle to confirm if this adjustment meets your requirements.

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

Having trouble locating the OBJ file in your Three.js WebGL project?

I am attempting to load an obj file using Three.js, but despite following various tutorials and resources online, I am only met with a black screen and no error messages in the console. The console output from the LoadingManager indicates that the objects ...

The absence of the import no longer causes the build to fail

Recently, after an update to the yup dependency in my create react-app project, I noticed that it stopped launching errors for invalid imports. Previously, I would receive the error "module filename has no exported member X" when running react-scripts buil ...

What is the proper way to reference a property's value within another property of the same JavaScript Object?

Within a Gulp.js file (or any Javascript file), I have defined paths in a Javascript object: var paths = { devDir : 'builds/development/', devDirGlobs : this.devDir+'*.html' } I am attempting to reference the pro ...

Using an HTML element to pass a variable into a replace function

I am looking to highlight a 'SearchString' by replacing it with <span style="background-color: yellow">SearchString</span> within a targetString. The SearchString varies, so I am wondering how I can make this happen. This is what I ...

Utilize React Hook Form to easily reset the value of an MUI Select component

I created a dropdown menu where users can select from "Item 1", "Item 2", and "Item 3". Additionally, there is a "Reset" button that allows users to clear their selection and make a new one. Below is the code I used: import React from ...

Is it possible to add a tooltip to a div without using any JavaScript or JQuery?

I've been working on designing a form that includes tooltips displayed constantly on the right side to assist users in completing their forms. To achieve this, I have separated each part into Divs and added a tooltip for each one. <div title="This ...

I am looking for a way to add some color to the text within a div on my HTML page. Can you help me

Is there a way to apply background color only to the text content within this div, without styling the entire element? ...

When trying to manually trigger the firing of the autocomplete function to get a place using Google API

My goal is to retrieve the data from autocomplete.getPlace() when triggering this event manually. Essentially, I have a function that captures the user's location in Lat/Lng format, and afterward, I aim to access other useful data using getPlace() su ...

Error: Unable to modify the div content - Uncaught TypeError: Unable to assign value to innerHTML of null

Attempting to update the contents of a div using JavaScript and innerHTML, but encountering an issue. After implementing the code to change the div's content, the functionality stopped working. The syntax has been double-checked. Tools being used in ...

Using jQuery combogrid to automatically target and populate input box upon row selection

I have implemented combogrid functionality from https://github.com/powderblue/jquery-combogrid to display suggestions while typing. $(".stresses").combogrid({ url: '/index/stresssearch', debug: true, colModel: [{'col ...

Looping through arrays using ng-repeat

{ "employees" : [ { "name" : "XXX", "id" : "1", "Salary" : [ { "Month" : "XXXX", "Amount" : "XXXX", }, { "Month" : "XXXX", "A ...

Sustain information across two pages using Next.js

Recently, I have been considering reorganizing my Next.js webapp to allocate different pages for handling various screens. Currently, I have a component that manages multiple states to determine the screen being displayed. Within the jsx section, I utilize ...

"In the most recent version of THREE.js (r82), the shadow is not detectable

I am having trouble casting a shadow from a cube onto a plane using MeshLambertMaterial in my code. Despite setting up the scene correctly, the shadows are not appearing as expected. Most solutions I have come across suggest that objects should be within ...

Using Nuxt and Cloudinary to seamlessly upload images from the client side directly to the Cloudinary platform

Is there a way to directly upload images from my Nuxt (vue) app to Cloudinary without involving a server? I've been searching for information on how to accomplish this but haven't found any concrete solutions. <v-file-input v-else ...

Duplicate a form based on the selected option

My goal is to duplicate a form based on the numerical value selected from the drop-down menu. You can find the corresponding code in this JSFiddle. Here is the HTML code: <div class="travel_tour-info"> <h3>How many people are you booking for? ...

ng-repeat fails to initiate $destroy on a particular element

After creating a custom directive to use within ng-repeat, I encountered an issue with the remove button. Whenever I click on the remove button to delete a specific element from the list, the $destroy event is triggered on the last element in the list inst ...

Is dynamic data supported by Next.js SSG?

I'm currently developing a web application with Next.js and I need clarification on how Static generated sites work. My project is a blog that necessitates a unique path for each blog entry in the database. If I were to statically generate my web appl ...

"Understanding How to Utilize the Grpc Stream Variable for Extended Processes in Node.js

Utilizing Node.js for connecting to a server through gRPC in order to execute a lengthy task. The server sends a one-way stream to the client (Node.js app) while the task is ongoing. I am looking to add a Stop button and have been advised that closing the ...

When making a fetch call in React, the response is the index.html file but Chrome displays an error saying Uncaught (in promise) SyntaxError: Unexpected token < in JSON

I have been encountering an issue while trying to retrieve data from my local express server and displaying it using React. The problem appears to be that instead of fetching the data, the index.html of the React app is being returned. In the network tab o ...

"Using conditional statements to check for specific value ranges and properly handling cases where the result is undefined

Currently, I am working on a function that prompts the user to input a number and then displays a calculated score after they click a button. The score is based on the value entered by the user. While constructing this feature, I have pondered whether IF ...