AngularJs :Expand and collapse in directive

I have this code :

<div >
    <ul class="nav nav-pills nav-stacked" data-ng-repeat="filter in filters">
        <li class="" >      
        <a class="" data-toggle="collapse" href="#collapse{{filter.year}}">
            {{filter.year}}         
            </a>
    <ul class="nav nav-pills nav-stacked panel-collapse collapse" id="collapse{{filter.year}}">
        <li><a href="#">January</a></li>
    </ul> 
</li>
    </ul>
</div>

I would like that when I click the years the second show the data...

But it doesn't work

Answers


Try ng-href instead:

Quoted from the doc:

Using Angular markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the {{hash}} markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error.


Use angularui toggle collapse (http://angular-ui.github.io/bootstrap/). In the outer ul set ng-click="isCollapsed = !isCollapsed" and in the inner ul set collapse="isCollapsed".

    module.directive('collapseDirective', function(){
      return {
          restrict: 'EA',
          transclude: 'true',
          link: function(scope, element, attrs){
            scope.isCollapsed = true;
          };
        }
    });

<div collapse-directive>
    <ul class="nav nav-pills nav-stacked" data-ng-repeat="filter in filters">
        <li>      
        <a ng-click={isCollapsed=!isCollapsed} class="" data-toggle="collapse" href="#collapse{{filter.year}}">
            {{filter.year}}         
            </a>
    <ul collapse=isCollapsed class="nav nav-pills nav-stacked panel-collapse collapse" id="collapse{{filter.year}}">
        <li><a href="#">January</a></li>
    </ul> 
</li>
    </ul>
</div>

Need Your Help

Is there a good way to grab NSLogged information from an iPhone app

ios iphone objective-c debugging nslog

I have an iPhone app that uses the user's location, and transit information, to display the arrivals of nearby trains. I have a bug in the code that I run into once or twice a week, and I'm having ...

How to set xmlns when serializing object in c#

c# asp.net-mvc xml xml-serialization

I am serializing an object in my ASP.net MVC program to an xml string like this;