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

Canvas only draws outside the table, with the exception of the first one

I am facing an issue with placing multiple signature pads inside table cells. Only the first canvas gets drawn, while the others remain blank. I have checked the mouse/touch events. The events are triggered (up/down/move) and the draw function is called, ...

javascriptvue.jshtml5-canvasvue-component

Utilizing jQuery to attach events to dynamically generated elements

I have a scenario where I am uploading multiple images and inserting them into specific div elements. These divs should toggle a class when clicked. Should I include the part of code that adds the onclick event inside the ajax success function? Your help i ...

javascriptjqueryhtmlajax

Storing toggle open state using a variable

I have created a toggle open/close DIV with a UL list inside that looks like this: <div id="dropdown-1"> <div class="option-heading"> <i class="fa fa-angle-double-up"></i> <i class ...

javascriptjquerytoggleslidetoggle

Formatting numbers in Angular 2 to include a space every three zeros in a money amount

Let's say I have the number 30000 and I want to format it as 30 000. What method should I use to achieve this? Here are more examples: 300000 -> 300 000, 3000000 -> 3 000 000. Just to clarify, this is not about using dots or commas, but rathe ...

javascriptangulartypescriptinternationalization

When placing the script URL with a pound sign into the DOM, it gets truncated

When I receive URLs for trackers from an external resource, they often contain a # symbol which causes the URL to be cut off after the pound sign when trying to execute/load it in the DOM. Unfortunately, these URLs are provided by a 3rd party and I have no ...

javascriptjquery

How can we best store the component's state in the URL in AngularJS?

I am working with a reusable widget that has its own state. This state includes the content of the search bar (2), one or more select boxes (1), and the tree where the user can pick the currently active element (3). My goal is to create a locationManager ...

javascriptangularjsangularurl-routingangular-routing

VueJS and Vite: Encountering an unexpected character '�' while attempting to import files that are not JavaScript. Keep in mind that plugins are required for importing such files

I'm puzzled by the error message I'm receiving: [commonjs--resolver] Unexpected character '�' (Note that you need plugins to import files that are not JavaScript) file: /..../..../WebProjects/..../ProjectName/node_modules/fsevents/fse ...

javascriptvue.jsfsevents

What are some strategies for blocking URL access to a controller's method in Rails 3?

My goal is to enhance my Rails 3 application by integrating Javascript/jQuery code that retrieves data from the server and updates the page based on the fetched information. I am considering implementing jQuery's $.get() method for this purpose: $.g ...

javascriptjqueryruby-on-railsajaxruby-on-rails-3

Have I potentially compromised my project by executing the command `npm audit fix --force`?

While working on a React project using Vite, everything was going smoothly. I decided to incorporate some charts and came across the recharts package, which I found quite appealing. So, I added it to my project using the command npm i recharts. After runn ...

javascriptreactjsviterecharts

Protractor is unable to locate the password input field on Gmail using its ID

Currently, I am in the process of configuring Protractor to test my application. However, I am encountering a roadblock as it requires authentication through Gmail and I am struggling with the login process: describe('Vivace Home page', function ...

javascriptangularjsprotractor

What is the best way to merge the value of an input field (contained in an array) with another input field before submitting the form

Currently, I am in the process of editing the data in a form's input field. I know that submitting form data this way is not ideal, but I encountered a challenge with getting the value from a datetimepicker into the ng-model. Specifically, I was able ...

javascriptphparraysangularjsforms

Is there a way to automatically execute this function when the React component is loaded, without the need for a button click?

After spending a few days trying to figure this out, I'm hitting a wall. This ReactJS project is new for me as I usually work with C#. The goal is to create a print label component that triggers the print dialog when a link in the menu is clicked. Cu ...

javascriptreactjs

Display upon hovering, conceal with a button located within a popup container

There seems to be an issue with the code below. Even though it works perfectly in jsfiddle, it breaks in my Chrome and other browsers right after displaying the ".popup" div. Can anyone point out what I might be doing wrong? I found similar code on this si ...

javascriptjqueryhtmlcssjquery-hover

What are some ways I can efficiently load large background images on my website, either through lazy loading or pre

Just dipping my toes into the world of javascript. I'm currently tackling the challenge of lazy loading some large background images on my website. My goal is to have a "loading" gif displayed while the image is being loaded, similar to how it works ...

javascriptjquerycssbackground-imagelazy-loading

What are some of the potential drawbacks of utilizing the same template ref values repeatedly in Vue 3?

Is it problematic to have duplicate template ref values, such as ref="foo", for the same type but different instances of a component across views in a Vue 3 application? Let's consider the following example pseudocode: // ROUTE A <te ...

javascriptvue.jsvuejs3vue-reactivity

Issue: requireJS configuration is invalid

Here is the file structure of my project - src |- main.js |- math.js The math.js file acts as an AMD module and is being required in main.js. I have npm installed require.js and included it in main.js. //main.js var rjs = require('requirejs' ...

javascriptnode.jsrequirejsamdjs-amd

Implementing color transitions in javascript

Everyone talks about transitioning things in CSS, but have you ever thought about transitioning background colors in JavaScript? I'm currently working on a function that changes the background color of a div with the id of ex1 to green. However, I&apo ...

javascripthtmlcss

PHP displays the array returned by Ajax as "[object Object],[object Object]"

When working with Jquery, I am creating two arrays - one embedded inside the other. Here is an example of what it looks like: arrayOne = [{name:'a',value:1}, {name:'b',value:2}] var arrayTwo = [{name:'foo',value:'blah&ap ...

javascriptphpjqueryarraysajax

Function that can be shared between two separate jQuery files

Let's say I have two separate jQuery files, both containing the same function. I would like to create a common file where I can store this shared function and then import it into other files. For example: first.js file : window.addEventListener(&apo ...

javascriptjquerydjango

Detecting single letters in a sentence and changing their appearance using CSS

Looking to make a subtle change to text? I need to swap out single letters in a passage (I have a cat that ate a fish). Any ideas on how to do this? The goal is to input a block of text into a textbox, then display it in a div. I've had difficulty fi ...

javascriptjqueryhtmlcssjquery-selectors