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?
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
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;
}
});
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;
}`
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.