CODEWITHSUNDEEP
angularjstwitter-bootstrapangularjs-directiveangularjs-ng-repeat
user880386
user880386

Reputation: 2827

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

Upvotes: 1

Views: 3209

Answers (2)

Bharat
Bharat

Reputation: 943

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>

Upvotes: 0

Khanh TO
Khanh TO

Reputation: 48972

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.

Upvotes: 1

Related Questions