AngularJS way to detect selecting the same <option> in <select> dropdown

Question

ng-change doesn't fire if you select the same option. I'm using a dropdown box to select a sort order, and want selecting the same value to re-sort by the same criteria.

On Chrome I can't get anything to work. I've tried firing an ng-click event on the select itself, the options, and on a containing element, but the click doesn't seem to propagate up.

I've tried using ng-focus and ng-blur, but focus happens before they've actually selected any option, and blur doesn't happen until the user actually clicks away from the dropdown, after having selected an option. That would work, but is a bit weird because nothing happens at first.

I've also tried ng-mousedown and ng-mouseup - mouseup doesn't seem to fire, and mousedown, like focus, fires before they select an option.

There is a very ugly workaround here: Detecting interaction with select box, but it won't even work for me because mousedown isn't firing.

There has to be some way to do this! My last-resort hack is to basically build a dropdown from scratch without using <select>.

or add a "refresh" button near the select which triggers a re-sort. — Fabrício Matté
– Fabrício Matté, Commented Dec 28, 2013 at 23:10
this is one of the multitude of reasons so many select replacements scripts have been created. Has nothing to do with anything angular, has to do with browsers. They won't register event on already selectd single option — charlietfl
– charlietfl, Commented Dec 28, 2013 at 23:10
I feared as much... I will just put a refresh button until/unless someone comes up with something really fancy. — tobek
– tobek, Commented Dec 29, 2013 at 1:27

hityagi · Accepted Answer · 2016-07-11 09:47:30Z

1

var app = angular.module("MyApp", []);

app.controller("MyCtrl", function() {
  this.data = ['price', 'user', 'date', 'color'];

  this.sort = function(param) {
    console.log("Sort by : " + param);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
  <div ng-controller="MyCtrl as ctrl">
    <select>
      <option ng-click="ctrl.sort(opt)" ng-repeat="opt in ctrl.data">{{opt}}</option>
    </select>
  </div>
</div>

answered Jul 11, 2016 at 9:47

hityagi

5,2561 gold badge26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS way to detect selecting the same <option> in <select> dropdown

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related