AngularJs：展開和指令

Question

崩潰我有這樣的代碼：

<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> 

我想，當我點擊了多年的第二場演出中的數據...

但它不工作

Answer 1

嘗試ng-href代替：

從文檔報價：

在href屬性中使用類似{{hash}}的角度標記會使 鏈接轉到錯誤的URL，如果用戶在Angular有 機會用其值替換{{hash}}標記之前單擊它。直到角 取代標記鏈接將被打破，最有可能 返回404錯誤。

Answer 2

使用angularui切換摺疊（http://angular-ui.github.io/bootstrap/）。在外部ul中設置ng-click =「isCollapsed =！isCollapsed」，並在內部ul集合中設置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>