angular 手风琴 - `isFirstOpen` 当 `is-open` 已经在使用中

Question

不知道如何写这个问题。当我需要两个 is-open 时我该怎么办？

我尝试添加 is-open 两次（<accordion-group is-open="status.open" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled"> 因为我希望第一个在加载时打开。但是因为我使用了 is-open 两次它不起作用。

然后我试了<accordion-group is-open="status.open || status.isFirstOpen" is-disabled="status.isFirstDisabled">那也不行。

这是一个笨蛋http://plnkr.co/edit/EYBHLXYCuAZbJwparO6u?p=preview

那么，top accordion 组现在根本不工作，我正在尝试让它在页面加载时打开。但我真的想完全消除那个顶级手风琴组，只有下面的动态手风琴组，但在页面加载时打开第一个动态手风琴组。我现在不知道如何继续。

<div ng-controller="AccordionDemoCtrl">
  <accordion close-others="oneAtATime">
    <accordion-group is-open="status.open || status.isFirstOpen" is-disabled="status.isFirstDisabled"
        <accordion-heading><i class="glyphicon-plus"></i>
            I can have markup, as well! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open2, 'glyphicon-chevron-right': !status.open2}"></i>
        </accordion-heading>
        This is just some more content to illustrate fancy headings.
    </accordion-group>

    <accordion-group is-open="status.open2" ng-repeat="group in groups">
        <accordion-heading><i class="glyphicon-plus"></i>
           {{group.title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
        </accordion-heading>
       {{group.content}}
    </accordion-group>

  </accordion>
</div>

Answer 1

http://plnkr.co/edit/wEoyhKK4h0aslEdcGSJY?p=preview

将isOpen:true添加到列表中的第一项

  $scope.groups = [
    {
      title: 'title 1',
      content: 'content 1',
      isOpen: true
    },
    {
      title: 'title 2',
      content: '<li>Content 2</li>'
    },
    ...
  ];

然后将您的 html 更改为：

  <div ng-controller="AccordionDemoCtrl">
    <accordion close-others="oneAtATime">
    
      <accordion-group is-open="group.isOpen" ng-repeat="group in groups">
        <accordion-heading><i class="glyphicon-plus"></i> {{group.title}}
          <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': group.isOpen, 'glyphicon-chevron-right': !group.isOpen}"></i>
        </accordion-heading>
        {{group.content}}
      </accordion-group>

    </accordion>
  </div>

---

http://plnkr.co/edit/wEoyhKK4h0aslEdcGSJY?p=preview