角手风琴 - 当“is-open”已经在使用时，“isFirstOpen”

Posted 2023-05-09

【中文标题】角手风琴 - 当“is-open”已经在使用时，“isFirstOpen”

【英文标题】：angular accordion - `isFirstOpen` when `is-open` already in use

【发布时间】：2015-09-21 16:33:27

【问题描述】：

甚至不知道如何写这个问题。当我需要两个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

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

<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>

【问题讨论】：

为什么不is-open="status.open || status.isFirstOpen"？目前尚不清楚您要完成什么。

那会很好很简单，不幸的是它没有用:(。我正在尝试将 chevon 图标和加号与第一个打开的代码结合使用。

你不能使用is-open两次。你想结合什么？

@JossefHarush 谢谢大家，plunker 以及上面在原始帖子中提供的更多信息。

【参考方案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

【讨论】：

非常感谢。非常简单的解决方案。 Angular...为什么要花这么长时间才能学习？！ ：头痛：