CODEWITHSUNDEEP
angularjs
emurb
emurb

Reputation: 147

how to use ng-click on a li to hide its ul parent

I have a list refreshing with 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 a li is clicked but i can't make it work... is this a bad way to do that ?

Upvotes: 3

Views: 3331

Answers (1)

Shomz
Shomz

Reputation: 37701

ng-repeat creates a scope for each iteration, so your visible variable from the ul element is not necessarily the same one as in each li element. Calling the parent scope's variable from the li elements 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 originally would allow you to hide each li element separately.

See the difference here: http://jsfiddle.net/oxda3aes/

Upvotes: 3

Related Questions