How to use ng-click on li to hide its parent ul address
I have a list refreshing the results in my li elements:
<ul ng-init="visible = true" ng-show="visible">
<li ng-repeat="suggestion in results"
ng-mouseover="changeSearchValue(suggestion)"
ng-click="visible = false">
{{suggestion}}
</li>
</ul>
I would like to hide my list (ul) when I clicked, but I cannot get it to work ... is this a bad way to do it?
source to share
ng-repeat
creates a scope for each iteration, so your variable visible
from element is ul
not necessarily the same as in every element li
. Calling the parent variable from elements li
should fix it:
<ul ng-init="visible = true" ng-show="visible">
<li ng-repeat="suggestion in results"
ng-mouseover="changeSearchValue(suggestion)"
ng-click="$parent.visible = false"> <--this is the key
{{suggestion}}
</li>
</ul>
What you wrote initially will allow you to hide each element li
individually.
See the difference here: http://jsfiddle.net/oxda3aes/
source to share