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}}这样的Angular标记将会成为如果用户在Angular拥有之前单击它，则链接将转到错误的URL 有机会用它的值替换{{hash}}标记。直到Angular 替换标记链接将被破坏并且很可能返回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>

AngularJs：在指令中展开和折叠

2 个答案: