Not able to select previously selected option

Question

ng-change is not getting fired after selection of previously selected option. Because of which I am not able to handle the same next selection.

<select ng-model="selectedOption" ng-change="handleSelection()">                        
    <option value="A" selected>A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>

I want to show to the user the last selected option and want to handle the same. But since ng-model is not changing on next same option selection ng-change is not getting fired.

How to handle this scenario?

Are you trying to have the user perform multiple selections but from the same select element? As you have said, ng-change will only fire off when a change has occurred. If you are trying to get multiple inputs from a user, you will most likely have to make a new input, or do some cleaning of your old value to "force" the change — Joffutt4, Jan 03 '17 at 13:03
ng-change only fire when the model is changed. if you previously select option `A` and then again try to select option `A` it wont work since the model value isn't change ng-change will not fire — Sachila Ranawaka, Jan 03 '17 at 13:03
Yes im aware of this situation @Joffutt and sachila ranawaka. But i want show the popup message on same next selection. And if i try to clean the old value then user last selection would be gone and don't want that. — Rjun, Jan 03 '17 at 13:18

score 0 · Answer 1 · answered Jan 03 '17 at 14:30

You should use 'ng-change' if value is changing. In your case you want to handle event when value is not changed, so you may use 'ng-click' to handle the same option selection.

Demo : http://jsfiddle.net/Despotix/vgw5bxrq/3/

<div ng-controller="MyCtrl">
  <select ng-model="selectedOption" ng-click="click()">
          <option value="A" selected>A</option>
          <option value="B" class="option">B</option>
          <option value="C" class="option">C</option>
          <option value="D" class="option">D</option>
   </select>
    {{seletedQueue}}
</div>

--

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.seletedQueue = '';
    $scope.click = function(item) {
        $scope.seletedQueue += '->' + $scope.selectedOption;
    }
}

You can select twice (or more) the same option: ->B->B->A

Saeed · Accepted Answer · 2017-01-04T08:45:10.687

You can do without ng-change by only checking click count:

1st click event raises after each opening select

2nd click event raises after one item selected

we use blur event to clear click count after lost focus

by this way you will get selected item without change event and without selecting new item :

<select ng-model="selectedOption" ng-click="handleSelection()" ng-blur="resetClickCount()">                        
    <option value="A" selected>A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>

--

app.controller("myCtrl", function($scope) {
    $scope.clickCount = 0;

    $scope.handleSelection = function() {
        $scope.clickCount++;
        if ($scope.clickCount==2) {
            alert($scope.selectedOption);
            $scope.clickCount = 0;
        }
    }

    $scope.resetClickCount = function() {
        $scope.clickCount = 0;
    }
});

score 0 · Answer 3 · answered Jan 04 '17 at 07:39

Try defining the selectedOption value in your controller instead of using 'selected' attribute.

And to track the previously selected option, you can use a $scope variable and change it at the end of your handleSelection() function. A working demo here - jsfiddle.net `

$scope.selectedOption = "A";
$scope.lastSelectedOption = "A";
$scope.handleSelection = function(){
console.log("Selected Item: "+$scope.selectedOption);
console.log("Last Selected Item:" + $scope.lastSelectedOption);
console.log("");
$scope.lastSelectedOption = $scope.selectedOption;
}`

Not able to select previously selected option

3 Answers3