Tips for retrieving data from Angular dropdown menus

Question

Tips for retrieving data from Angular dropdown menus

How to Retrieve Selected Value in AngularJS

HTML

<select data-ng-model='datasource.value' ng-options='sourcetype.dataSourceType as sourcetype.dataSourceDesc for sourcetype in sourcetypes' data-ng-change="getAccountCredentials(sourcetype);">
    <option disabled value="" selected>Choose One</option>
</select>

JavaScript

$scope.getAccountCredentials = function(data){      
    console.log(data);  
}

I'm having trouble retrieving the selected values.

Can anyone suggest the angular way to achieve this?

javascript angularjs

Answer 1

Answer №1

You have already linked your selected value to datasource.value using data-ng-model='datasource.value'

Consider removing

data-ng-change="getAccountCredentials(sourcetype);"

:

<select data-ng-model='datasource.value' ng-options='sourcetype.dataSourceType as sourcetype.dataSourceDesc for sourcetype in sourcetypes'>
    <option disabled value="" selected>Choose One</option>
</select>

Instead, utilize $watch to monitor changes on your datasource.value

$scope.$watch("datasource.value",function(newValue){      
    console.log(newValue);  
});

Answer 2

You have already linked your selected value to datasource.value using data-ng-model='datasource.value'

Consider removing

data-ng-change="getAccountCredentials(sourcetype);"

:

<select data-ng-model='datasource.value' ng-options='sourcetype.dataSourceType as sourcetype.dataSourceDesc for sourcetype in sourcetypes'>
    <option disabled value="" selected>Choose One</option>
</select>

Instead, utilize $watch to monitor changes on your datasource.value

$scope.$watch("datasource.value",function(newValue){      
    console.log(newValue);  
});

Tips for retrieving data from Angular dropdown menus

Answer №1

Similar questions

Ways to verify multiple radio groups to ensure none have been left unchecked

Creating a dynamic interaction between HTML forms and JavaScript using the onsubmit event handler

Is it worth diving into Vue.js, Angular, or React while utilizing Laravel currently?

The initialization of the R Shiny HTML canvas does not occur until the page is resized

Customizing Form Inputs in ReactJS using Props Array

How does Vue handle the situation when the value of an input field does not match the bound "data"?

Deciphering the intricacies of the http request

Working with MySQL in Node.js using async/await

What is the Dojo counterpart for jQuery's .live() function?

Button Vote in Bootstrap is unresponsive

Dealing with errors in AngularJS factory servicesTips for managing errors that occur

What happens if you try to add a member to a Mailchimp list who is already on the list

When trying to import the "firebase/app" module, an error occurred stating that the default condition should be the last one to be considered

Creating a streamlined system for building and deploying an angularjs/asp.net web api

JavaScript-Based Header Features Similar to Excel

Manipulate JSON insertions and character replacements using JavaScript or Python

Leveraging JavaScript to access the margin-top property of the HTML and body tags

Facing issues with the forEach method in ReactJs when attempting to access data from an array

Is it more beneficial to keep a function inside or outside another function if it is only being used within it?

Troubleshooting issues with the Bootstrap dropdown menu