Choose Your Date of Birth from the Drop-Down Menu with ng-options

I've been working on creating a dropdown for Date of Birth using ng-options. I've managed to set it up for day and month, but I'm encountering an issue with the year dropdown. The problem is that the years are displayed in reverse order, starting from 2014 to 1915, but the values are from 1 to 100 instead of 2014 to 1915. Can you suggest a better approach? I feel like the current method is a bit outdated. I prefer not to use ng-repeat.

HTML

<select class="day" id="DateOfBirth_Day" name="DateOfBirthDay" required ng-pattern="\d+" ng-model="user.question5.answer.dobday" ng-options="o for o in days">
    <option value="DD">DD</option>
</select>
<select class="month" id="DateOfBirth_Month" name="DateOfBirthMonth" required ng-pattern="\d+" ng-model="user.question5.answer.dobmonth" ng-options="o for o in months">
    <option value="MM">MM</option>
</select>
<select class="year" id="DateOfBirth_Year" name="DateOfBirthYear" required ng-pattern="\d+" ng-model="user.question5.answer.dobyear" ng-options="o for o in years">
    <option value="YYYY">YYYY</option>
</select>

Controller Code

 $scope.user = {
     question5: {
        answer: {
            dobday: 'DD',
            dobmonth: 'MM',
            dobyear: 'YYYY'
        }
     }
}
$scope.totaldays = 31;
$scope.totalmonths = 12;
$scope.totalyears = 100;
$scope.days = ['DD'];
for (var i = 0; i < $scope.totaldays; i += 1) {
    $scope.days.push(i + 1);
}

$scope.months = ['MM'];
for (var i = 0; i < $scope.totalmonths; i += 1) {
    $scope.months.push(i + 1);
}

$scope.years = ['YYYY'];
for (var i = 2014; i > 2014 - $scope.totalyears; i--) {
    $scope.years.push(i - 1);
}

Answer №1

Certainly, you have the option to utilize ng-repeat with <option> element instead of using ng-options.

<select class="year" id="DateOfBirth_Year" name="DateOfBirthYear" required ng-pattern="\d+" ng-model="user.question5.answer.dobyear" >
    <option value="YYYY">YYYY</option>
    <option ng-repeat="o in years" value="{{o}}">{{o}}</option>
</select>

See the demonstration in this Fiddle

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

I am looking for a way to generate unique dynamic IDs for each input textbox created within a PHP while loop. Can

How can I retrieve the ID of a selected text box generated within a while loop in order to update a field similar to phpMyAdmin? <?php while($row=mysql_fetch_assoc($result)) { ?> <tr> <td><input type ...

Setting the position of a tooltip relative to an element using CSS/JS

I'm struggling to make something work and would appreciate your help. I have a nested list of items that includes simple hrefs as well as links that should trigger a copy-to-clipboard function and display a success message in a span element afterwards ...

One issue encountered in the AngularJS library is that the default value does not function properly in the select element when the value and

In this AngularJS example, I have created a sample for the select functionality. It is working fine when I set the default value of the select to "$scope.selectedValue = "SureshRaina";". However, when I set it to "$scope.selectedValue = "Arun";", it does n ...

Only displaying the VUE slot when the content meets a certain criteria

I have encountered a situation where I have two routes rendering the same component but with different data from an API source. The component in question has a child component called <base-section> that utilizes a v-if directive to determine whether ...

Getting all inline styles from an HTML string using JavaScript

(JavaScript) I am working with an html email template stored as a string. Is there a way to extract all the inline styles used in the template? For instance, if I have this input: <div style="min-width:300px;max-width:600px;overflow-wrap:break-word ...

Communication through HTTP requests is not supported between docker containers

I currently have two applications running as services within a docker-compose environment. My React App A Node.js server In an attempt to make an HTTP request from my React app to the Node.js server, I am using: fetch("http://backend:4000/") However, w ...

Guide on iterating through multiple Objects while comparing key values with a string

My goal is to iterate through multiple objects, comparing the date_created key value of each object to a specific string. These objects are retrieved from an array that I can map over to display the results. Once I loop through each object, I want to push ...

JavaScript powered simple window

I am currently working on a basic modal that will open and display content. Unfortunately, I cannot add images to help illustrate the design, so I'll do my best to describe it in detail. The modal is linked to an image slider where the heading change ...

Unleashing the y-axis and enabling infinite rotation in Three.js

In my three.js project, I am utilizing orbital controls. By default, the controls only allow rotation of 180 degrees along the y-axis. However, I would like to unlock this restriction so that I can rotate my camera infinitely along the y-axis. As someone ...

When trying to append in jQuery, the error "JQuery V[g].exec is not a

Attempting to create a script that adds a table to a div within the website using the following function: function generateTable(container, data) { var table = $("<table/>"); $.each(data, function (rowIndex, r) { var row = $("<tr/>"); ...

React is throwing a parsing error due to the incorrect use of braces. Remember, JSX elements must be wrapped in an enclosing tag. If you were trying to include multiple elements without a parent tag, you can use a JSX fragment

Having recently started working with React, I came across this code snippet return ( <div> dropdown ? (<li className='goal-list-item' onClick={() => setDropdown(!dropdown)}>{goal.name}</li>) : ...

Add a CSS class to a dropdown menu option in HTML and JavaScript (JQuery) if it has a specified ID

I am brand new to HTML and JQuery, and I'm struggling with setting a class for my select element when the currently selected option has an ID of "answer". This is crucial for checking the correctness of a multiple choice question. If achieving this i ...

Rendering the Next.js Link tag on the page is displaying as [object Object]

Hey there! I'm currently working on creating breadcrumbs for a webpage and this is what the breadcrumb array looks like: const breadcrumbs = ['Home', "Men's Top", 'Winter Jacket'] Now, in JSX with Next.js, I am att ...

Upon successful registration, users will be automatically redirected to their profile page

Having trouble with the redirection to the login page from my profile page, which is an HTML file and the main page is the login page. I've tried redirecting to both pages, but it always lands in the catch block whenever a redirect is attempted. angu ...

Generating numerous div elements with jQuery's zIndex property

While attempting to create a function that runs on the $(document).ready() event and is supposed to generate a new div, I encountered an issue. Whenever I try to create another div with the same DOM and Class attributes but in a different position, a probl ...

The Checkboxlist generated by jQuery-Ajax does not function when clicked on

I have a dynamic radio button list (rblCategories) that, when the selected value changes, triggers the creation of a checkbox list using ajax and populates it. However, I am facing an issue with updating my datatable when any checkbox is checked/unchecked ...

Trigger a modal from one sibling Angular component to another

My application utilizes an Angular6 component architecture with the following components: <app-navbar></app-navbar> <app-dashboard></app-dashboard> The Dashboard component consists of: <app-meseros> </app-meseros> < ...

I am encountering an issue while attempting to set up admob for my react native application, as I am facing

Encountering an error The file "/BuildProductsPath/Release-iphoneos/XCFrameworkIntermediates/GoogleAppMeasurement/WithoutAdIdSupport/GoogleAppMeasurement.framework/GoogleAppMeasurement(APMAdExposureReporter.o)" does not have bitcode. Suggestions include r ...

Storing references to the DOM elements external to the rendering component

Just diving into the world of Electron + Typescript, so please bear with me. Currently, I'm experimenting with what can be achieved within Electron. Issue: My goal is to manipulate DOM elements outside of the renderer. I pass a button as a parameter ...

Is it permissible to assign the same element as a child to multiple parent elements in jQuery?

Imagine you have the following HTML structure: <div id="first"></div> <div id="second"></div> Now, if you use JavaScript and JQuery to perform the following actions: var $child = $("<span id='child'>Hello</span ...