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 ?
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