CODEWITHSUNDEEP
javascriptangularjs
NVO
NVO

Reputation: 2713

Show sub li in Angular

I have the following code: 

<ul class="list-group">
  <li class="list-group-item" ng-repeat="item in items | filter:searchText" ng-click="item.expanded = !item.expanded"> 
                        {{item.name}} {{templatefolder.expanded}}
     <ul ng-show="item.expanded" class="list-group-item">
        <li class="list-group-item" ng-class="{'active' : item.id == document.itemId}" ng-repeat="folder in item.folders" ng-click="document.itemId= item.id">
           {{folder.name}}
        </li>
     </ul>
  </li>
</ul>

That code works. But, when i click a 'sub item' (item.folders.name) the li is collapsing because he is in the li with the ng-click function. Is there a way to show the item.folders after a click on a item?

Upvotes: 2

Views: 57

Answers (1)

Konstantin Dinev
Konstantin Dinev

Reputation: 34905

Add $event.stopPropagation(); to your child li so the event doesn't propagate to the parent.

ng-click="document.itemId= item.id; $event.stopPropagation();">

Upvotes: 1

Related Questions