javascripthtmlangularjsdropdownng-show

ng-show value will not update inside itself by clicking ng-click


I have this problem where I am trying to do a dropdown-menu using ng-show. My HTML looks something like:

<div class="dropdown" ng-mouseover="test()" ng-mouseleave="test2()" ng-click="test3()">
       <span>{{dropDownTimeEst}}</span>
       <i class="fa fa-caret-down bron-caret" aria-hidden="true"></i>
       <div class="dropdown-content" ng-show="showDropwDownTime">
           <a ng-repeat="item in times" ng-click="changeTimeEst(item)">{{item}}</a>
       </div>
</div>

The point is that whenever I hover or click on the dropdown box it shows me the dropdown-content. I manage to open the dropdown-content successfully but when clicking on item and triggering the changeTimeEst function the ng-show doesnt update in scope.

Controller code:

$scope.test = function(){
    $scope.showDropwDownTime = true;
}
$scope.test2 = function(){
    $scope.showDropwDownTime = false;
}
$scope.test3 = function(){
    $scope.showDropwDownTime = true;
}
$scope.changeTimeEst = function(item){
    $scope.dropDownTimeEst = item;
    $scope.showDropDownTime = false; //This here does not do anything, but it should close the dropdown-content

Does anyone have ideas how to solve this problem ?


Solution

  • Hi I think your click event is propagating to outside div. So, you should stop propagation of this event. Try this :

    <div class="dropdown" ng-mouseover="test()" ng-mouseleave="test2()" ng-click="test3()">
           <span>{{dropDownTimeEst}}</span>
           <i class="fa fa-caret-down bron-caret" aria-hidden="true"></i>
           <div class="dropdown-content" ng-show="showDropwDownTime">
               <a ng-repeat="item in times" ng-click="changeTimeEst(item); $event.stopPropagation();">{{item}}</a>
           </div>
    </div>
    

    As, you can see I have added $event.stopPropagation() on your anchor click event.
    Hope, this solves your problem :) Thanks