2015-03-31 113 views
0

我正在使用AngularStrap手风琴菜单。在这里,我想切换图标,箭头向上和向下,但它不工作:AngularStrap手风琴菜单,试图将图标箭头向上和向下切换

<!DOCTYPE html> 
<html ng-app="mgcrea.ngStrapDocs"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> 
    <script src="//code.angularjs.org/1.3.8/angular.min.js" data-semver="1.3.8"></script> 
    <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.2.1"></script> 
    <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.2.1"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 

    <div class="bs-docs-section" ng-controller="CollapseDemoCtrl"> 

    <div class="bs-example" append-source> 
    <!-- ngModel is optional --> 
    <div class="panel-group" ng-model="panels.activePanel" role="tablist" aria-multiselectable="true" bs-collapse> 
     <div class="panel panel-default" ng-repeat="panel in panels"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title"> 
      <a bs-collapse-toggle> 
       {{ panel.title }} 
      </a> 
       <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i> 
      </h4> 
     </div> 
     <div class="panel-collapse" role="tabpanel" bs-collapse-target> 
      <div class="panel-body"> 
      {{ panel.body }} 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

    </body> 

</html> 
+0

http://plnkr.co/edit/7yPTfXhqXNFmLCX1OTzY?p=preview plunker演示 – 2015-03-31 16:20:05

回答

2

试试这个。

标记

<i class="pull-right glyphicon" 
    ng-class="{'glyphicon-chevron-down': panels.activePanel === $index, 'glyphicon-chevron-right': panels.activePanel !== $index}"> 
</i> 

Working Plnkr

+0

http://plnkr.co/edit/7yPTfXhqXNFmLCX1OTzY?p=预览我的要求是不同的...对不起,我没有把我的代码放在前面的plunker演示中..... – 2015-03-31 16:44:57