Question

我想在页面加载时折叠手风琴，因为我使用的是is-open =“group.isOpen”，但它无效。

代码：

<accordion>
  <accordion-group  is-open="group.isOpen" ng-repeat="session in sessions.list" >
    <accordion-heading>
     <span>{{session.title}} : </span>
     <span>{{session.scheduled_date | date:'uvarsityDate'}}</span>
     <i class="pull-right glyphicon" 
     ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
   </accordion-heading>
   <div class="">
      <ul class="list-group">
       <dl class="dl-horizontal list-group-item">
          <dt>About the class</dt>
          <dd ng-bind-html='session.description'></dd>
       </dl>
       <dl class="dl-horizontal list-group-item">
          <dt>Timings</dt>
          <dd>{{session.time_from}} to {{session.time_to}}</dd>
          <span></span>  
       </dl> 
     </ul>             
    </div>
  </accordion-group>
 </accordion>

有没有人建议我如何在页面加载时让手风琴处于打开状态？

Answer 1

您在"group.isOpen"使用<accordion-group>但"isopen"变量用于glyphicon-chevron。您应该使用相同的变量名称。

它应该是这样的：

<accordion>
  <accordion-group  is-open="group.isOpen" ng-repeat="session in sessions.list" >
    <accordion-heading>
     <span>{{session.title}} : </span>
     <span>{{session.scheduled_date | date:'uvarsityDate'}}</span>
     <i class="pull-right glyphicon" 
     ng-class="{'glyphicon-chevron-down': group.isOpen, 'glyphicon-chevron-right': !group.isOpen}"></i>
   </accordion-heading>
   <div class="">
      <ul class="list-group">
       <dl class="dl-horizontal list-group-item">
          <dt>About the class</dt>
          <dd ng-bind-html='session.description'></dd>
       </dl>
       <dl class="dl-horizontal list-group-item">
          <dt>Timings</dt>
          <dd>{{session.time_from}} to {{session.time_to}}</dd>
          <span></span>  
       </dl> 
     </ul>             
    </div>
  </accordion-group>
 </accordion>

Answer 2

您可以使用session中的ng-repeat变量来存储isOpen州。

<accordion-group is-open="session.isOpen" ng-repeat="session in sessions.list">

并在您希望在控制器中打开的会话中将isOpen设置为true：

$scope.sessions = {
  list: [
    {
      title: 'foo',
      description: 'fooooo',
      time_from: new Date(),
      time_to: new Date(),
      isOpen: false,
    },
    {
      title: 'bar',
      description: 'barrrr',
      time_from: new Date(),
      time_to: new Date(),
      isOpen: true,           // this session will be opened.
    },
    {
      title: 'baz',
      description: 'bazzzz',
      time_from: new Date(),
      time_to: new Date(),
      isOpen: false,
    },
  ]
};

示例Plunker： http://plnkr.co/edit/10JZ4ZhD20KV0p8wozyb?p=preview

accordion group.isOpen不起作用

2 个答案: