Trigger ng-change event for each dropdown selection made in AngularJS

Currently, I have a dropdown menu that allows users to select a report for generation. When a user picks a report from the dropdown, it generates and downloads the report for mobile viewing. By utilizing ng-change, the system only detects when a user wants to generate different reports. However, I would like the system to allow users to select the same item from the dropdown multiple times and download the report on each selection.

The code structure is as follows:

Markup:

<div>
    <select ng-model="currentlySelected" 
            ng-options="opt as opt.label for opt in options" 
            ng-change="logResult()">
    </select>
    The selected value is {{ currentlySelected.value }}.
</div>

Javascript:

angular.module('demoApp', []).controller('DemoController', function($scope) {

    $scope.options = [
        { label: 'one', value: 1 },
        { label: 'two', value: 2 }
    ];
    $scope.currentlySelected = $scope.options[1];

    $scope.logResult = function() {
         console.log($scope.currentlySelected);   
    }
});

Fiddle: http://jsfiddle.net/KyleMuir/cf59ypyw/

My expectation is to be able to select "two" twice and see the result logged in the console twice. Is there a way to achieve this with the current directive, or should I explore other options?

Answer №1

Implementing a button can be beneficial as it simplifies the process without requiring additional programming:

http://jsfiddle.net/ootnh0sz/1/

<select ng-model="currentlySelected" ng-options="opt as opt.label for opt in options" ng-change="logResult()"></select>
<button ng-click="logResult()"> Go </button>

Update.

If needed, resetting the form may be the most appropriate solution.

http://jsfiddle.net/ootnh0sz/3/

$scope.logResult = function() {
     console.log($scope.currentlySelected); 

    // once data is processed
    $scope.currentlySelected = null;
}

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 was disappointed by the lackluster performance of the DataTable in CodeIgniter; it did not

I recently started using CodeIgniter and I'm having trouble getting the dataTable to work. Here's a snippet of my page: <table class="table table-striped table-bordered table-hover dataTables_default" id="dataTables-example"> ...

What is stopping me from utilizing ES6 template literals with the .css() method in my code?

I am currently working on a project where I need to dynamically create grid blocks and change the color of each block. I have been using jQuery and ES6 for this task, but I am facing an issue with dynamically changing the colors. Below is the snippet of m ...

Having trouble getting the ValidatorPipe to function properly in my nest.js application

Issue Description There is an issue with the current behavior where initializing a validation pipe for a request body does not reject invalid types as expected. Desired Outcome The expected behavior should be that when a user provides a value that does n ...

Instructions on inserting an IFRAME using JavaScript into dynamically loaded content via AJAX

How can I dynamically add an IFRAME using JavaScript to content that is refreshed via AJAX? Consider the following example: $('#bar').delegate('.scroll-content-item span a', 'click', function() { var object_id = $(this).p ...

What is the best way to transfer $scope to a service in angular.js?

I have two services listed below. When navigating to a specific URL, I need to resolve "OtherService.promise". However, for certain routes, I would prefer to utilize a scope variable within the AppService method instead of the promise. How can I make thi ...

Implementing dynamic image insertion on click using a knockout observable

I'm utilizing an API to retrieve images, and I need it to initially load 10 images. When a button is clicked, it should add another 10 images. This is how I set it up: Defining the observable for the image amount: public imageAmount: KnockoutObserva ...

Guide to building a seamless page without refreshes with the help of jquery, express, and handlebars

I need assistance with my express JS project. I am trying to set up two pages using NodeJS, incorporating handlebars as the template engine. My objective is to have the first page rendered using res.render('home'), and for the second page to be l ...

How can I effectively save data to a session using connect-redis?

I am looking to save the username of an account into session storage. I am currently using node.js with the expressjs framework and have attempted to utilize connect-redis for storing sessions, following a tutorial on expressjs. Can someone please guide ...

How can I implement a Component to show the details of a blog post when clicked in Next.js?

Can someone help me figure out how to display individual blog post details in a modal when clicked on in a blog website, where the posts are stored in a Component rather than pages? The file structure is set up like this: Component |_ Posts.js |_ PostDet ...

Optimizing Chrome's Precious Load Time

Encountering issues with Chrome browser auto-filling passwords, usernames, etc. Creating a problem where input field validation for emptiness is not possible in Chrome while it functions correctly in other browsers. $(document).ready(function() { ...

What is the best method for storing user data such as documents, audio files, and videos in AngularJS?

I am interested in creating an Angular project that allows registered users to upload various types of data such as documents, audio files, and videos. I would like to store this data and display it on the home page. Is it feasible to store documents, au ...

Tips for identifying modifications in an input text field and activating the save button

Currently, I am developing a function that can detect any changes made in the text field and then activate the save button accordingly. This code is being executed in Visual Studio 2017, using HTML and JavaScript. (function () { var customer_addres ...

Two select boxes trigger multiple sorting operations

Struggling to implement 2 different sorting operations on two separate columns in a datagrid, using 2 different select boxes has proven to be challenging. I attempted the code below, but as a beginner, I was unable to solve it... In HTML: <select ng ...

Animating jQuery to adjust height based on a percentage

My animation using percentage is not working as expected. It expands to the whole height instantly instead of smoothly transitioning to 100%. Here is my CSS code: #block-views{ overflow:hidden; height:20px; } This is my HTML code: <div id="block-view ...

Colorful radial spinner bar

I am interested in replicating the effect seen in this video: My goal is to create a spinner with text in the center that changes color, and when the color bar reaches 100%, trigger a specific event. I believe using a plugin would make this task simpler, ...

Select the five previous siblings in reverse order using jQuery's slice method

I have a unique approach to displaying a series of divs where only 5 are shown at a time using the slice() method. To navigate through the items, I include an ellipsis (...) link after every 4th item, which allows users to easily move on to the next set of ...

Update the value after verifying the element

I am trying to retrieve data from my database and update the values when an element is clicked (accepting user posts). The code I have written seems to work, but I encounter an error stating that props.actions is not a function when clicking on an element. ...

Saving a JavaScript array as a Redis list: A step-by-step guide

I'm trying to figure out how to save array values individually in a Redis list instead of saving the whole array as a single value. Any suggestions on how to achieve this? P.S. Please excuse my poor English. var redis = require('redis'), ...

Loop through an array that holds another array in javascript

After making a post request, I am receiving the following object: "{\"Success\":false,\"Errors\":{\"Name\":[\"The Name field is required.\"],\"Id\":[&b ...

There is no assigned value in scope for the shorthand property. You must either declare one or provide an initializer

I'm just starting out with TypeScript. Encountering the error 'No value exists in scope for the shorthand property 'firstName'. Either declare one or provide an initializer.' while using Prisma with Next.js to create a new user in ...