CODEWITHSUNDEEP
htmlangularjsselect
webta.st.ic
webta.st.ic

Reputation: 5179

Call function in ng-change when multiple times was same option clicked

I've got this code:

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.currentOption;
  $scope.showWindow = false;

  $scope.myOptions = [{
    id: 1,
    name: 'This opens the window'
  }, {
    id: 2,
    name: 'Option 2'
  }, {
    id: 3,
    name: 'Option 3'
  }];

  $scope.showOption = function() {
    if ($scope.currentOption.id == 1) {
      $scope.showWindow = true;
    }
    console.log($scope.currentOption);
  }

  $scope.closeWindow = function() {
    $scope.showWindow = false;
  }
});
.filterWindow {
  width: 100px;
  height: 100px;
  background-color: rgba(50, 50, 50, 0.5);
  z-index: 100;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <select ng-options="option as option.name for option in myOptions" ng-change="showOption()" ng-model="currentOption"></select>

  <div ng-if="showWindow" class="filterWindow">
    <button ng-click="closeWindow()">Close</button>
  </div>
</div>

I've got a dropdown with three options. When I click on an option, it calls me a function with ng-change. The function is just called, when I click on another option in the dropdown list because of the ng-change. I would like to call the function every time I click on an option, also on the same twice in a row. So for example: When I click on 'Option 1', it should call the function (this works). When I click again on the same option (in this case 'Option 1'), so it should call the function again (this doesn't work, because the ng-change didn't detect a change in the dropdown). I tried it with ng-click, but then it calls the functions also when I open the dropdown, this is bad for me. The reason I need this is, in my web application one of my options opens a window, where I can filter a list. So when I filter it and than would like to change the filter critireas, it should open again this window by clicking on the same option which is selected in this moment. That's why the ng-click isn't a good solution, because this window would open also when I open the dropdown. I hope this is clear. Any ideas?

EDIT: So I builded now in the snippet example a window. When you click on the option which opens the window, it works when you do this the first time. Then you close the window, but don't change the option before... After you closed the window, the option which opens the window is still selected. When you click again on it, it don't open the window, becaus there was no change, so ng-change call for the function don't work... How to force this?

Thanks

Upvotes: 0

Views: 2009

Answers (1)

Vineet
Vineet

Reputation: 4655

You should change this function 

$scope.showOption = function() { //Check whether drop down has any selected value
   if($scope.currentOption) { 
      console.log($scope.currentOption);
   }
}

Use ng-click instead ng-change And remain the click event. It will not console when you open the drop down but event will trigger. Check this plunker

Upvotes: 1

Related Questions