current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 0 down vote favorite

I have a list, with 2 levels, being displayed like this in my vbhtml page:

<li>Contract Coverage:</li>
<li ng-repeat="(key, val) in orgSettings">
    <label>{{key}}</label>        
    <ul>
       <li ng-repeat="setting in val">{{setting.settingname}}</li>
    </ul> 
</li>
<li>

Line 3 represents an org, and multiple settings will be listed underneath (the ng-repeat in line 5). I'd like to turn this display into a collapsible/expandable treeview at the Org level, so that the settings hide away and can be expanded to show underneath a specific org in the list if the user clicks on a the plus sign next to it.

Help please?

share|improve this question

1 Answer 1

up vote 1 down vote accepted

Simplest way I can think of it is:

<li ng-init="visible = {}">Contract Coverage:</li>
<li ng-repeat="(key, val) in orgSettings" ng-init="visible[key]=true" ng-click="visible[key]=!visible[key]" >
    <label>{{key}}</label>        
    <ul ng-show="visible[key]">
       <li ng-repeat="setting in val" >{{setting.settingname}}</li>
    </ul> 
</li>
<li>

See this plunker: http://plnkr.co/edit/vge0wqV590cCsofUZU05?p=preview

share|improve this answer
1  
You rock. Thanks so much! –  ASattar May 1 '14 at 19:20

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.