Using Angular, we can assign an array iteration as the value for a dropdown option in

Following the controller logic:

$scope.form_data = {
    day: 'Day'
};

$scope.days = [
    'Day',1,2,3,4,5,6,7,8,9,10,
    11,12,13,14,15,16,17,18,19,20,
    21,22,23,24,25,26,27,28,29,30,
    31
];

In the html section:

<select ng-model="form_data.day" ng-options="day for day in days"></select>

The output is as follows:

<select ng-options="day as day for day in days" ng-model="form_data.day" class="ng-pristine ng-valid ng-touched">
   <option value="string:Day" label="Day" selected="selected">Day</option>
   <option value="number:1" label="1">1</option>
   <option value="number:2" label="2">2</option>
....
</select>

Everything works fine, but Iā€™m struggling to find a way from the documentation on how to set the option value as the array key. In other words, for the first option in the example above, I need its value to be 0, which corresponds to the first position in the array.

Is there a solution using ng-options?

Answer ā„–1

Achieving this is definitely possible, you were so close!

Take a look at the initial response in this thread:Put an index to a model with ng-options for a simple array

Your select tag should be structured like this:

<select 
        ng-model="form_data.day" 
        ng-options="days.indexOf(day) as day for day in days"></select>

I put together a detailed example here: https://jsfiddle.net/w7jdktxn/1/

Answer ā„–2

That specific task has never been attempted by me, however, it aligns with the specific request you put forth!

        <div ng-init="days = [1,2,3,4,5]">
            <select ng-model="form_data.day" class="ng-pristine ng-valid ng-touched">
                <option value="" disabled selected style="display: none;">Select day</option>
                <option ng-repeat="day in days" value="{{$index}}" >{{day}}</option>
            </select>
            <h3>form_data.day={{form_data.day}}</h3>
        </div>

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

Tips for embedding multiple video players on a single HTML page

I'm currently experiencing an issue with the YouTube API. I am in the process of developing a website where I want a video to automatically play when I open its corresponding image. The code I used initially worked successfully: <script> // 2. ...

Updating the button text in Angular 7

Here's a question: <button (click)="activateMotion(1)"> <img class="emotion-icon" id="positive-icon" src="" /> </button> <button (click)="activateMotion(-1)"> <img class="emotion-icon" id="negative-icon" src="" /&g ...

Using JQuery to loop through elements when clicked

I've been experimenting with different methods to iterate through a series of 4 li elements, each having a class of "item_n" where n is a number from 1 to 4. I want the iteration to increase by 1 with every click. Despite my efforts, my code isn' ...

What is the method for retrieving a specific value following the submission of an AngularJS form?

Here is how my form begins: <!-- form --> <form ng-submit="form.submit()" class="form-horizontal" role="form" style="margin-top: 15px;"> <div class="form-group"> <label for="inputUrl" class="col-sm- ...

Toggle button visibility on ng-repeat item click

Hello everyone, I'm encountering an issue with displaying and hiding buttons in ng-repeat. <div class="row" ng-repeat="item in items"> <button type="button" ng-click="add()">+</button> <button type="button" ng-click="remo ...

using variables as identifiers in nested JSON objects

Within my code, there is a JSON object named arrayToSubmit. Below is the provided snippet: location = "Johannesburg, South Africa"; type = "bench"; qty = 1; assetNumber = 15; arrayToSubmit = { location : { type : { 'qty' ...

What is the best way to extract value from a JSON object with jQuery?

How can I retrieve the value of 'FRI' from the JSON feed returned by an AJAX call using jQuery? $.ajax({ url: query, type: "GET", dataType: "json" success: function(data) { var day = // extract data value from JSON ...

Using Moment.js to showcase historical information within a specified timeframe based on the user's timezone

I'm finding it challenging to properly handle historical data display: Current Situation: The database contains records stored in "YYYY-MM-DD HH:mm:ss" format in UTC+0 (MariaDB - DateTime type) A web application (using moment.js) allows users to se ...

Creating a centered and beautifully styled picture with a specific maximum size using React

I recently completed the development of a new website, which can be viewed at Upon inspection of the website, it is evident that the photo is not centered and appears too large on mobile phones. Despite my efforts to align it using various methods outline ...

The ExpressJS Req.method TypeError occurs when attempting to read the 'method' property of an undefined object

My node express server is throwing an error: Error in index.js. const bodyParser = require('body-parser'), express = require('express'), path = require('path'); const config = require('./config'); con ...

Differences in Loading Gif Visualization Across Chrome, Safari, and Firefox

Having an issue with a loading image in Chrome, while it displays correctly in Safari and Firefox. In Chrome, I see two half-loading images instead of one whole image. Struggling to find a solution for this problem, any assistance would be greatly apprecia ...

Capture all URL paths that accept query parameters

Is it achievable using ui-router to capture a pathway that includes forward slashes and query parameters? Consider having the catch-all rule in the state configuration: var exState = { url: '/example/*path', ... }; $stateProvider.state( ...

What could be causing the unexpected token error when sending an http post request in AngularJS?

When trying to perform an HTTP post request, I was able to successfully achieve it using the following command: curl --request POST --url https://api.sendgrid.com/v3/mail/send --header 'Authorization: Bearer xxxxxxxxxxxxx' --header 'Content ...

Utilizing jQuery Ajax to submit multiple forms using a single selector in one go

I'm having an issue with jQuery Ajax involving multiple forms. Each time I execute it, only the top form works properly while the others do not function as expected. Can anyone provide assistance with this? Here is the source code: <form id="form_ ...

Using the moment library in Angular to convert date and time can sometimes lead to errors

Whenever I attempt to convert a Gregorian date to a Persian date, the minute value in the conversion ends up becoming an error. For instance, let's say I want to convert this specific date and time to a Persian date: 2020-09-14T16:51:00+04:30 should ...

Error: Trying to access 'product-1' property on an undefined object

Having trouble displaying JSON data in my React.js project, I've been stuck on an error for the past couple of days with no luck in solving it. The JSON data is stored in a file named products.json: { "product-1": [ { ...

Attempting to engage with the like button on a Facebook page through Python's Selenium seems to be problematic

Here is the code for adding a (Facebook page like button): WebDriverWait(driver, 30).until(EC.presence_of_element_located((By.XPATH, '/html/body/div[1]/div/div[4]/div/div[1]/div/div[1]/div[2]/div[2]/div/div/div[3]/div/div[1]'))).click() The clic ...

Can Vuejs delay the calculation of a computed property until the component is "ready"?

Within my Vue.js application, I have a `computed` property that relies on a value fetched from an AJAX call. I am looking for a way to delay the calculation of this `computed` property until after the `ready` method has completed. While everything is fun ...

Display only the offcanvas button

Having trouble with Bootstrap 5 offcanvas? The offcanvas doesn't hide when I click the button again. <button data-bs-toggle="offcanvas" role="button">Add to Cart</button> Every time I click the button again, the offcan ...

Checking Whether a Value Entered in an Input Field Exists in an Array Using jQuery

Can someone help me with checking if a specific value is in my array? I want to achieve something like that, any suggestions on how to do it? if(jQuery.inArray($('#ValueInputTitle').val, variableValueInput) !== -1) { console.log("is in arr ...