1

I have a dropdown menu that closes if something is selected but stays open if nothing is selected. I am trying to do it so that it closes when the fa fa-caret-down arrow is clicked but it is not doing the trick. How can I fix it? Here is the code for that part:

  
<label  style="color:white;">How many players?</label>
<div ng-class="{true:'error-bron', false:'nonerror-bron'}[dropDownPeopleError===true]" class="dropdown" ng-click="test()">
   <span>{{dropDownPeople}}</span>
   <i class="fa fa-caret-down bron-caret" aria-hidden="true" ng-click="test(); $event.stopPropagation();"></i>
   <div class="dropdown-content" ng-show="form.showDropDownPeople">
      <a ng-repeat="item in people" ng-click="changePeople(item); $event.stopPropagation();">{{item}}</a>
   </div>
</div>

And here is the part of my controller

$scope.test = function(){
    $scope.form.showDropDownPeople  = true;
}
Petroskali
  • 25
  • 5
  • I think you're going to want to do a function that is called onclick when the arrow is clicked that does $scope.form.showDropDownPeople = false; You could also do an onclick that changes the style attribute of the dropdown contents to display:none; – Michael d Jan 11 '18 at 22:03
  • I wrote a function and placed it by the click but it is not closing the items by clicking the arrow: $scope.hideDropdown = function(){ $scope.form.showDropDownPeople = false; } – Petroskali Jan 11 '18 at 23:00
  • Because you need to use onclick() – Michael d Jan 11 '18 at 23:06
  • onclick broke the code. all divs became scattered around – Petroskali Jan 11 '18 at 23:56

1 Answers1

0

You can hide the element using ng-show, where the element only shows if the expression inside the tag is true, ie ng-show="showDropDownPeople"

aphrid
  • 589
  • 8
  • 25
  • Can you explain it a bit? – Petroskali Jan 11 '18 at 21:49
  • Angular has their own HTML tags which let you control how and when elements are shown. For example, you have `ng-hide`, `ng-show`, and `ng-if`, all of which let you define an expression to evaluate using your model (ie, your scope). See https://stackoverflow.com/questions/21869283/when-to-favor-ng-if-vs-ng-show-ng-hide for more details. In your case, you can use your boolean value as the expression to control which elements show. But, I'm not 100% sure, so ymmv. – aphrid Jan 11 '18 at 21:59
  • For example like adding the ng-click to the button? Because this didnt work still – Petroskali Jan 11 '18 at 22:35