How to retrieve a value from ng-options using AngularJS?

I want to display a dropdown in which users can select a specific month. Currently, the dropdown is populated with all 12 months in an array. How can I make sure that only the selected month is fetched from the dropdown?

Code Snippet:

$scope.Month = ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 $scope.selectmonth = $scope.Month;

 $scope.SaveReport = function () {

    PrintReportRepository.save(
            {
             SelectMonth: $scope.selectmonth,
             },

HTML:

 <select class="form-control" ng-model="selectmonth" ng-options ="months as months for months in Month">{{months}}</select>
javascriptc#angularjs

Answer №1

To choose the first item as selected, you can utilize the code 

$scope.selectmonth = $scope.Month[0]
. If you use 
$scope.selectmonth = $scope.Month
, the entire array will be set as the model.

Answer №2

Here is the code snippet you need to use: plunker

Controller:

$scope.Month = ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 $scope.SaveReport = function () {
    console.log('SelectMonth', $scope.selectmonth);
 }

HTML:

<select class="form-control" ng-model="selectmonth" ng-options ="months as months for months in Month" ng-change="SaveReport()"></select>

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

Prevent specific cells from being focused in ngGrid

Utilizing ngGrid to showcase data, I've encountered a dilemma with the cell templates. Some fields utilize a cell template to display an input field, while others do not. By using jQuery in my browser console, I attempted to remove the tabindex attri ...

jqueryangularjsng-grid

The onclick attribute on a button in HTML is not functioning properly following the inclusion of an Ajax load

I am facing an issue with a button that is being dynamically loaded from PHP code using Ajax. The button has an onclick attribute that calls a function named viewImage. The Ajax request is triggered every 5 seconds inside the loadImages function. Snippet ...

javascriptphpjqueryajaxtwitter-bootstrap

Error during the production build of Next.js Internationalized Routing: Prerendering page encountered an unexpected issue

The configuration in my next.config.js file looks like this: module.exports = withBundleAnalyzer({ i18n: { locales: ['en', 'es'], defaultLocale: 'en', localeDetection: false, }, ... }); This setup allows for ...

javascriptreactjsnpmnext.js

Angular rest call is returning an undefined response object attribute

When attempting to retrieve the attribute of a response object, it is returning as "undefined". var app = angular.module('angularjs-starter', []); app.controller('MainCtrl', function($scope, $http) { $scope.addNewChoice = functio ...

javascriptangularjsrest

Troubleshooting routing issues in MVC Web API and AngularJS

I am currently working with MVC Web API and Angular JS. Everything was running smoothly when I had a single routeProvider defined. However, as soon as I added another routeProvider, things started to break down... This is the code snippet causing me trou ...

angularjsrestmodel-view-controllerangularjs-routing

A guide on navigating through nested JSON objects with the help of async.js

Having recently transitioned from a Python background to nodeJS/Javascript's asynchronous nature, I am exploring how to traverse a nested JSON object and extract its values using async.js. In my quest for answers, I stumbled upon this helpful snippet ...

javascriptnode.jsexpressasync.js

I'm having trouble sending a POST request using nodejs

Trying to send an app.post request with Postman, but encountering some issues. Here's the code snippet: const express = require('express'); const PORT = 8080; const HOST = '0.0.0.0'; const app = express(); app.listen(PORT, HOST) ...

javascriptnode.jsexpresspostpostman

Tips for customizing the appearance of a single plot within a time series chart using FusionCharts or FusionTime

I've implemented a time series line graph using FusionCharts in the following code snippet: const MyChart = () => { const schema = [ { name: "Category", type: "string" }, { ...

javascriptreactjsfusionchartsreact-fusioncharts

Issue: "Access denied to load local file resource: file://sharedpath"

When trying to run the code on a server with nodejs in Chrome, it seems to not be working as expected. <span><a href="file://sharedpath" target="_blank">Open folder.</a></span> The error message I am encountering in the developer ...

javascriptangularjsnode.jsgoogle-chromeinternet-explorer

Preventing AJAX/hash functionality for specific links exclusively within jQuery Mobile

I've come across some outdated solutions for this issue, but it seems they are no longer applicable to jQuery Mobile. My goal is to disable the AJAX/hashbang behavior for specific links only. I know that I can disable it globally like this: /** * ...

javascriptjqueryajaxjquery-mobilehashbang

How to display an array with JSON objects in Angular 4

Looking to display specific data from an array in my .html file that originates from my .ts file: myArray: ["03/05/2018", "2:54", "xoxo", "briefing", "your", [{ "Id": "1", "Time": "20:54", "Topic": "mmmmm", "GUEST1": { "Role": "HS" ...

javascriptarraysjsonangulartemplates

How can you determine the status of an individual checkbox within a reactjs (material-table) component?

In my project, I have implemented a table that displays a list of students retrieved from a database. Upon clicking on each student row, a modal popup appears showing another table with 4 rows and 3 columns. Each column in the modal contains 4 checkboxes. ...

javascriptreactjscheckboxmaterial-uimaterial-table

Show the selected row's data from a gridview in a dropdown menu

I am facing an issue with displaying the selected row value in a dropdown list. Can anyone assist me with this problem? Here is an example scenario: https://i.sstatic.net/RYssP.png Upon looking at the image, you will notice that the selected row's ...

c#htmlasp.net

Having trouble with the pagination feature while filtering the list on the vue-paginate node

In my current project, I have integrated pagination using the vue-paginate node. Additionally, I have also implemented filtering functionality using vue-pagination, which is working seamlessly. Everything works as expected when I enter a search term that d ...

javascriptnpmvue.jsvuejs2

Multiple executions of Google API sign in listener

I have been working on a Vue module that allows users to add events to Google Calendar easily. Once a user signs in, there is a listener in place to call a method for adding an event to the calendar. To access the gapi functionalities required for this tas ...

javascriptvue.jsgoogle-calendar-api

Menu Options in Material UI Navbar

I am currently working on incorporating an icon in my navbar that, when clicked, will reveal a dropdown list of notifications. Although I have come across several code examples for dropdown menus, none of them have completely assisted me or provided specif ...

javascriptreactjsmaterial-uifrontend

URL not functioning properly on Django CMS menu

After setting up django-cms and creating a collapsible menu with categories and subcategories, I encountered an issue. When clicking on a main category, the URL appears correct but it does not navigate to the corresponding page. Main categories without chi ...

javascriptdjangomenudjango-cms

Guide to filtering an array within ag-grid when defining a column

After switching from using DataTable to ag-grid, I encountered a challenge. In DataTable, I accessed the first element from the attributes array where typeName='ItemType'. Now, I am looking to achieve the same functionality in ag-grid. Any sugges ...

javascriptjqueryangularjsag-grid

Guide on converting JSON to CSV in React by utilizing the map function

When I convert JSON data to CSV by clicking a button, it currently stores the data in the CSV file separated by commas. However, I want each piece of data to be on its own line. How can I achieve this? For example: Minor,Minor What I Want: Each item on a ...

javascriptnode.jsarraysreactjsmern

Having trouble fetching values in Node.js after a certain period of time has passed

Whenever the page loads, the sha1 function is supposed to run and it should run after 5 seconds. var crypto = require('crypto'); console.log(sha1()); setTimeout(sha1, 5000); console.log(sha1()); function sha1() { var dt = dateTime.create(); ...

javascriptnode.js