Question

我正在使用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>

Answer 1

试试这个。

<强>标记

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

Working Plnkr

Angular Strap手风琴菜单，试图上下切换图标箭头

1 个答案: