Submitting option values in AngularJS: A step-by-step guide

Why does AngularJS ng-options use label for value instead of just the value itself?

Here is my current code:

<select ng-model="gameDay" ng-options="gameDay for gameDay in gameDayOptions">

This currently displays:

<select ng-model="gameDay" ng-options="gameDay for gameDay in gameDayOptions">
<option value="0">Saturday</option>
<option value="1">Sunday</option>
</select>

However, upon submission (GET), it sends this:

http://www.domain.com/save.php?gameDay=Saturday

I would like it to send this instead:

http://www.domain.com/save.php?gameDay=0
javascriptangularjsformsselectreturn-value

Answer №1

It seems like the variable gameOptons is actually an Array of strings. To achieve what you are looking for, you should modify your code as follows:

<select 
       ng-model="gameDay" 
       ng-options="key as gameDay for (key, gameDay) in gameDayOptions">
</select>

The snippet you provided stores the selected string in the model, but if you want to store the index instead, make sure to adjust the ng-options directive like this:

ng-options="key as gameDay for (key, gameDay) in gameDayOptions"

Here's a example

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

Using Vue to implement a "v-model" on a custom component that incorporates the ace-editor

Snippet CustomEditor.vue: <template> <div class="custom-container"> <div class="custom-editor" ref="editor"></div> </div> </template> <script> import ace from 'ace-builds' import 'ace- ...

javascriptvue.jsvuejs2ace-editor

Struggling to find a solution for your operating system issue?

We are currently attempting to utilize the markdown-yaml-metadata-parser package for our project. You can find more information about the package here. Within the package, it imports 'os' using the following syntax: const os = require('os ...

javascriptnode.jsangularnpmangular-cli

By default, the select option in AngularJS will have a value of either an object or null

This block of code is located in the js file: $scope.ListOption = []; $scope.ListOption.push({ Value: "0", Name: Car }); $scope.ListOption.push({ Value: "1", Name: House }); Below is the corresponding HTML code: <select class="form-control" id="Categ ...

javascriptangularjshtml

Output the word 'Days', 'Months', or 'Years' depending on the value of N, which represents the number of days

I am currently utilizing moment.js in conjunction with vue 3. I've implemented a function that calculates the disparity between two dates. The functionality works as expected, but here's where my query comes in. The function is structured like so ...

javascriptvue.jsmomentjs

Reliable Dropdown Navigation Bars

Once I have successfully implemented three dynamic drop down menus using the combination of jQuery, AJAX, and PHP, the next challenge arises. After populating the dropdown menus based on user selections (e.g., selecting a value in the first dropdown menu ...

javascriptphpjqueryajax

Setting a default date dynamically for v-date-picker in the parent component, and then retrieving the updated date from the child component

I'm working with a custom component that utilizes the v-date-picker in various instances. My goal is to have the ability to dynamically set the initial date from the parent component, while also allowing the date to be modified from the child componen ...

javascriptvue.jsvuetify.jsvue-props

Localization for Timeago JS Plugin

Currently, I have integrated the jQuery TimeAgo plugin into my project and included the following code snippet for localization in Portuguese: // Portuguese jQuery.timeago.settings.strings = { suffixAgo: "atrás", suffixFromNow: "a partir de agora", ...

javascriptjqueryhtmltimeago

Using Multiline Strings for Arguments

Is there a way to successfully pass multi-line strings containing spaces and tabs as a parameter to an express server? Below is the Express.js code snippet which accepts the parameter: app.get('/:prompt', async (req, res) => { ...

javascriptnode.jsajaxexpressmultilinestring

Gather data from various HTML elements with JavaScript when submitting a form

How can I extract values from HTML elements and send them for processing through a form? I'm attempting to compile a menu item list with the individual items' structure in place, but I'm struggling to figure out how to fetch the values upon ...

javascripthtmlcss

Trigger/cease cron job with the click of a button within a Node.js Express application

I have been working on a project that involves starting and stopping a cron scheduler when a user interacts with a button on the front end. Essentially, clicking the start button initiates the cron job, while clicking the stop button halts the timer. It&ap ...

javascriptnode.jsexpresscronscheduler

Leveraging CasperJS in a typical JavaScript script

I am currently working on a NodeJS project that involves integrating CasperJS. However, I have encountered an issue where the 'casper' module cannot be located. In an attempt to resolve this, I decided to npm install spooky --save based on some s ...

javascriptnode.jscasperjsspookyjs

Insert Angular HTML tag into TypeScript

I am currently working on creating my own text editor, but I'm facing an issue. When I apply the bold style, all of the text becomes bold. How can I make it so that only the text I select becomes bold without affecting the rest of the text? Additional ...

javascripthtmlcssangulartypescript

Tips for selecting an <select> option value based on an URL parameter automatically

I have a 2-step form where I am successfully passing the first name in the URL from step 1 to step 2, but I am struggling to do the same for a select field. Here's an example of what I have: In the URL: ?firstname=Bob Form Field: <input type= ...

javascriptphphtmlselect

Controlling dropdown menus filled with AJAX responseData

When it comes to Javascript, JQuery has always been a reliable companion for me. However, there are instances where I encounter challenges that require some extra effort to overcome. Today happens to be one of those days. I've stumbled upon an issue t ...

javascriptajax

Tips on capturing button click events using AngularJS and displaying an alert popup

Is there a way to utilize AngularJs to initiate a button click event and display an alert message box? I attempted using the alert("message") command but it was unsuccessful. ...

angularjs

Using Node.js and TypeScript to define custom data types has become a common practice among developers

I offer a variety of services, all yielding the same outcome: type result = { success: boolean data?: any } const serviceA = async (): Promise<result> => { ... } const serviceB = async (): Promise<result> => { ... } However, th ...

javascriptnode.jstypescript

Refresh the datatable using updated aaData

How do I automatically update the Datatable with new Json data? POST request is used to receive data, which is then sent to the LoadTable function in order to populate the datatable. function initializeTable(){ $("#submitbutton").on( 'click', ...

javascriptjsonajaxpostdatatable

Exploring the implementation of method decorators that instantiate objects within Typescript

Currently, I have been working on a lambda project and utilizing the lambda-api package for development. As part of this process, I have implemented decorators named Get and Post to facilitate mapping routes within the lambda api object. These decorators e ...

javascriptnode.jstypescriptapilambda

Access a folder in JavaScript using Flask

I need to specify a directory in a script. $images_dir = '{{url_for('.../pictures')}}'; In my flask application directory structure, it looks like this: Root -wep.py -templates -gallery.html -static -pictures The images are stored ...

javascriptpythonhtmlflask

Using jQuery to compel a user to choose a value from the autocomplete suggestions within a textarea

Currently, I have implemented a snippet that allows the user to choose cities from a list and insert them into a textarea separated by commas. However, I am looking to enhance this feature. I want the user to be able to search for a city by typing a part ...

javascriptjqueryautocompletejquery-ui-autocomplete