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

Changing the row property value of a textarea dynamically based on text input in ReactJS

Here is what I have tried: <textarea rows='2' onChange={e => setSomething(e.target.value)} className='form-control text-area ' value={something} placeholder='write something'> </textarea> output: Expected ...

Encountering the error "Cannot read property 'header' of undefined" while conducting tests on Nodejs using supertest

In my server.js file, I have set up my express app. I tried to run a demo test in my test file using express, but unfortunately, the test did not run successfully. const request = require('supertest'); const express = require('express' ...

Enclose several lines of text within a border in the midst of other content

I'm looking to add a stylish border around multiple lines of text in a paragraph without having the border appear on each line individually. While I could enclose all the text in a div, it would separate the content from the rest of the paragraph. W ...

The functionality of nested routing is not operating properly in react-router

I'm currently struggling to get my CollectionPage to render and match the URL correctly within my nested Route in React. Unfortunately, it doesn't seem to be working as expected! Here's a piece of code from my shop.component file that is be ...

What is the best way to eliminate backslash escaping from a JavaScript variable?

I am working with a variable called x. var x = "<div class=\\\"abcdef\\\">"; The value of x is <div class=\"abcdef\"> However, I want it to be <div class="abcdef"> Can someone help me unescape ...

I am facing an issue where the table in my Laravel Vue component is not displaying the data from

Recently, I've been diligently following an instructional series on VUE applications by a highly recommended YouTuber. Every step was meticulously executed until I hit a roadblock out of nowhere. The data from my database refuses to display on the fro ...

No code is appearing on the page, just a blank space

Whenever I visit this page on the web, the screen shows up as empty and I've encountered similar issues with other JavaScript pages that I've created. This makes me wonder if there might be a missing piece of code or something else causing the pr ...

Is it a good idea to resize images sourced from other websites before displaying them on your

I am currently working on a project that involves fetching images from various websites and displaying a thumbnail or resized version of the original image. Since I will be fetching many images at once, loading the original image files can take longer. ...

What is the best way to populate a dropdown menu by matching keys from an array within an ng-repeat

My JSON structure looks like this: 101 : "List": [ { "Name": "Pink" }, { "Name": "Black" } ] 102 : "List": [ { "Name": "Red" }, { "Name": "Yellow" } ] $sco ...

Is the value of the incorrect store ref in Vue3 being altered?

Welcome to the store: import { ref } from "vue"; // Storing all the country data export const countriesData = ref(); export const isLoading = ref(true); async function fetchData() { try { isLoading.value = true; const respon ...

Express router route encountered a 404 Error

The first API endpoint is functioning correctly, however when attempting to access the second route, I am encountering a 404 error. Upon sending a GET request to http://localhost:3000/api/posts/, the response received is as follows: { message: "TOD ...

Restrictions on the number of characters based on the size of fonts in an html list sc

Recently, I attempted to implement a ticker message on my website using li scroller. However, it appears that there is a limitation on the number of characters that can be displayed in the ticker message when different font sizes are used. With a smaller ...

Ideal selection for creating an authentic real-time audio application on android

As I consider choosing a stack of programming languages and frameworks for my android app development, I find myself well-versed in popular web frameworks like React, Redux, Angular, JavaScript, Java Android, and C/C++. My main concern lies in real-time f ...

A guide on replacing certain characters with spaces using AngularJS

I'm struggling with replacing special characters in a name (Inka -Tiitto-s-Camp-Aero-Gravity-Milan-9) with hyphens (-) due to an error message that says, "The URI you submitted has disallowed characters." Additionally, the name appears as (Inka Tiitto ...

The communication from AngularJS to Java only functions properly after the webpage is manually refreshed

Currently, I am utilizing angularjs within the javafx webview component to create a compact application. To connect the javascript bridge object, I am employing this code in a changelistener. private void initJavaScriptBrige(){ log.log(Level.INFO, "i ...

How can I craft an array of objects using various promise factory methods?

In my controller, I've written the following code: dashboardFactory.totalCustomer().then(function (response){ $scope.totalCustomer = response.data.count; }, function (error) { console.log(error); }); dashboardFactory.totalPartner().the ...

Arranging Angular Cards alphabetically by First Name and Last Name

I am working with a set of 6 cards that contain basic user information such as first name, last name, and email. On the Users Details Page, I need to implement a dropdown menu with two sorting options: one for sorting by first name and another for sorting ...

Restangular is throwing an error because it cannot find the reference for _

I encountered an issue with Restangular where I'm getting the error message: Uncaught ReferenceError: _ is not defined from restangular when trying to use it. Code Snippet: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angula ...

Can you explain the contrast between onsubmit="submitForm();" and onsubmit="return submitForm();"?

Is it possible that the form below is causing double submissions? <form name="myForm" action="demo_form.asp" onsubmit="submitForm();" method="post"> function submitForm(){ document.myForm.submit(); } I've noticed a bug where sometimes two ...

Steps for interacting with a button of the <input> tag in Selenium using Python

As I attempt to complete a form submission, I encounter an issue where clicking the submit button does not produce any action. It seems that the problem lies with the button being tagged as <input>: <input type="submit" name="submit ...