isOpen 仅对 angular ui-bootstrap 手风琴中 ng-repeat 中的第一个元素

Question

我想使用 isOpen 属性，这样第一个元素将在加载时打开。但是当我用下面的代码尝试它时，它不会以预期的方式进行。它会打开第一个，但是当点击第二个时，它会关闭第一个，但会打开所有其他的。有人知道如何解决这个问题吗？

//html
<uib-accordion close-others="accordionCtrl.oneAtATime">
        <uib-accordion-group ng-repeat="suffle in accordionCtrl.aContent" heading="{{suffle.title}}" is-open="accordionCtrl.status.isOpen">
          {{suffle.content}}
          <br>
          <button ui-sref="lesson" class="btn btn-default accordionbutton">Continue</button>
        </uib-accordion-group>
      </uib-accordion>

//controller
angular
    .module('neuralquestApp')
    .controller('AccordionCtrl', AccordionCtrl);

  function AccordionCtrl() {
    var accordionCtrl = this;

    accordionCtrl.oneAtATime = true;

    accordionCtrl.aContent = [
      {
        title: 'Introduction',
        content: 'What is a neural network?'
      },
      {
        title: '1',
        content: 'content1'
      },
      {
        title: '2',
        content: 'content2'
      },
      {
        title: '3',
        content: 'content3'
      }
    ];

    accordionCtrl.status = {
      isOpen: true
    };

  }

Answer 1

您可以为每个组设置单独的 is-open 属性：

<uib-accordion-group ng-repeat="suffle in accordionCtrl.aContent" heading="{{suffle.title}}" is-open="accordionCtrl.status.isOpen[$index]">

初始化JavaScript中的数组：

var i, openArr;

accordionCtrl.status = {
  isOpen: []
};

openArr = accordionCtrl.status.isOpen;
openArr[0] = true;
for (i = 1; i < accordionCtrl.aContent.length; i++) {
  openArr[i] = false;
}

Fiddle: http://jsfiddle.net/masa671/w3m4brLp/

Answer 2

与 masa 提出的基本相同，但有两个小的优化：

close-others 默认为 true 并且
你可以使用ng-init来初始化值

代码：

<uib-accordion>
    <uib-accordion-group ng-repeat="suffle in accordionCtrl.aContent" heading="{{suffle.title}}" is-open="suffle.isOpen" ng-init="suffle.isOpen = $first">
        {{suffle.content}}
        <br>
        <button ui-sref="lesson" class="btn btn-default accordionbutton">Continue</button>
    </uib-accordion-group>
</uib-accordion>

我在这里使用 suffle.isOpen 来存储状态，这是最方便的方式，但也可以使用任何其他索引变量。

基于提到的解决方案 here。

isOpen 仅对 angular ui-bootstrap 手风琴中 ng-repeat 中的第一个元素

isOpen for only first element in ng-repeat in angular ui-bootstrap accordion

angularjs

angular-ui-bootstrap