Expand and collapse with angular js

Question

I am trying to figure out a way to do an expand and collapse using angular js. I haven\'t been able to find an elegant way to do this without manipulating dom objects in the con

Answer 1

You can solve this fully in the html:

  Title
  

     Only shown when checkbox is clicked
  

This also works well with ng-repeat since it will create a local scope for each member.

  

    

       

       
{{m.title}}
    
    

      
 
      
{{ m.content }}
    
  

Be aware that even though a repeat has its own scope, initially it will inherit the value from collapse from super scopes. This allows you to set the initial value in one place but it can be surprising.

You can of course restyle the checkbox. See http://jsfiddle.net/azD5m/5/

Updated fiddle: http://jsfiddle.net/azD5m/374/ Original fiddle used closing tags to add the HTML text label instead of using tags.