When an option that is already selected in AngularJS is clicked, the ng-model value will be updated

I currently have a select element with a data-ng-options attribute:

  <select data-ng-model='myValue'>
    <option value=''> Default </option>
    <option data-ng-repeat="i in item" value='{$ i.value $}'>Option</option>
  </select>

My goal is to be able to click on the default option in the dropdown again to trigger a change in value (setting myValue to the default value ''). It seems like this doesn't work when the default option is already selected in the dropdown. How can I address this issue?

javascriptangularjsselect

Answer №1

This method should work effectively for your needs. I have high hopes for its success :)

<select data-ng-model='myValue' ng-change="change()">
    <option value=''> Default </option>
    <option data-ng-repeat="i in item">{{i}}</option>
 </select>

function MyCtrl($scope) {

    $scope.item = ['a', 'b', 'c'];
    $scope.myValue = '';

    $scope.change = function() {
        console.log("change");
        alert("Change to: " + $scope.myValue);
    };

}

demo

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

Adding two comparable Objects in Javascript / vuejs

I have two objects and I want to add the values of each key separately with another object. Here's an example: CharacterStats: { a: 0, b: 2, c: 0, d: 0 } ItemStats: { a: 0, b: -1, c: 4, d: 0 } The expected result is: CharacterStats: { a: 0, b: 1, c: ...

javascriptvue.jsobject

Build an intricate nested array structure using the properties of an object

My data object is structured like this: "parameters": { "firstName": "Alexa", "lastName": "Simpson", "city": "London" } The task at hand involves implementing the followin ...

javascriptarraysjsonjavascript-objects

javascriptHow to specify the character set in a Data URI

In a UTF-8 page, I am implementing the following code: var data = "a\tb\tc\r\nd\te\tf"; window.location.href = "data:text/csv;charset=utf-8," + encodeURIComponent(data); This code is used to prompt the browser to download an ...

javascriptdata-uri

Real-time data and dynamic checkbox functionality in AngularJS

I am working on an onclick function that involves data stored in objects. $scope.messages = [ {"id": "1"}, {"id": "2"}, {"id": "3"}, {"id": "4"}, ]; $scope.selection = { ids: {} }; $scope.sendMe = function(message) { //send the data with `id` and ...

javascriptangularjscheckbox

Guide on updating the form structure with ajax

Lately, I've been working on a contact module with 3 columns: name, email, and phone. There's also a +1 button that adds a new row to input another contact using ajax. However, a problem arises when updating the structure as the data in the old c ...

phpjavascriptjqueryajax

What causes the form to be submitted when the text input is changed?

I'm puzzled by the behavior of this code snippet that triggers form submission when the input value changes: <form> <input type="text" onchange="submit();"> </form> Typically, I would expect something along t ...

javascripthtml

The count of bits is not producing the anticipated result

Attempting to tackle the challenge of Counting Bits using JavaScript, which involves determining the number of set bits for all numbers from 0 to N, storing them in an array, and returning the result Let me provide an explanation Input: n = 5 ...

javascriptnode.jstypescriptdata-structuresecmascript-6

What is the best way to continuously compare two date variables every minute using Javascript?

In my script, I have two date variables - one representing the current time and the other two minutes later. My goal is to compare both values every minute and trigger a function when the current time is greater than or equal to the latter time. Unfortun ...

javascripthtml

Align component within material-ui grid

Looking to center align the same cards but not just the grid component, I need the content itself to be equally distant from the borders and each other. I've searched and tried different solutions without luck. https://i.stack.imgur.com/aZj7H.png htt ...

javascriptcssreactjsmaterial-ui

What is the best way to indicate progress as the canvas resizes an image?

Is there a way for me to access progress updates? My main focus is on receiving progress information, regardless of how it will be displayed. I may choose to use a progress bar in the future, but my current inquiry pertains solely to obtaining the data it ...

javascripthtmlcanvas

Feeling trapped by the NullPointer Exception bug

I am currently automating the add to cart process on the website "http://www.oyehappy.com" using TestNG POM Structure. I have encountered a NullPointer Exception while handling autosuggestion. The code for my POM Class is as follows: public class productPa ...

javascriptselenium

Stop automatic resizing on mobile device after postback

Encountered an issue with a website I'm currently developing. It's not causing any problems, but I want to enhance the user experience. My aim is to maintain the zoom levels of mobile devices after a postback. To provide more context, there is a ...

javascriptandroidhtmlasp.net

Issues persist with debugger functionality in browser development tools following an upgrade from Angular 8 to version 15

After upgrading from Angular version 8 to version 15, I've encountered an issue where the debugger is not functioning in any browser's developer tools. Can anyone provide some insight on what could be causing this problem? Is it related to the so ...

javascriptangulartypescriptpackage.jsonjavascript-debugger

React - Attempting to access property X from an undefined variable

Trying to access the string in section1.text, but my console is showing: https://i.stack.imgur.com/ox8VD.png Here's the JSX code I'm using: return ( <div> <h1>{this.props.article.title}</h1> ...

javascriptreactjsjsx

Issue with "Access-Control-Allow-Origin" header missing in express and react application

I've decided to work on a Node/Express project to improve my JavaScript skills, but I'm facing an issue with 'Access-Control-Allow-Origin'. For some reason, I can't do a get request from the front end and despite looking at other p ...

javascriptnode.jsreactjsexpress

Guide to connecting two separate components from distinct pages in React/MUI

My setup involves two pages: Appbar.js, where I have a top appbar and a Navigation Menu Icon Button that triggers the display of my Drawer (Material UI) in TempDrawer.js. Initially, everything worked fine when all the code was placed in the Appbar.js file ...

javascriptreactjsmaterial-ui

Updating input value in Vue using JavaScript method

When using JavaScript to set the value of an input in my Vue method, it initially appears to work. However, when I try to save the data, it only saves what was typed before the value was updated by the method. For example, if I type new yor and select "New ...

javascriptvue.jsvuejs2

Using javascript to navigate back to the previous page without redirecting to the main page

When utilizing an iframe, I've implemented a back button that triggers the following JavaScript code when clicked: document.getElementById("myframe").contentWindow.history.go(-1); // back While this works as intended, if there are no previous pa ...

javascripthtmliframe

Can you help me with sorting asynchronous line points for KineticJS?

For the past couple of days, I've been grappling with a peculiar issue that I found difficult to articulate in the title. The challenge I'm facing involves a KineticJs Line, which contains an array of points (line.attrs.points) represented as ob ...

javascriptjqueryhtmlcanvaskineticjs

The issue arises when attempting to execute an Ajax function within a JQuery append method, causing malfunction

My JQuery append function is calling an ajax function within the onChange method. Here is my code snippet: var data='<?php echo $data; ?>'; var tambah=1; var txt=1; function add_fullboard_dalam_kota(){ function showU(str) { ...

javascriptjqueryajax