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

小提琴：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仅用于角度ui-bootstrap手风琴中的ng-repeat中的第一个元素

2 个答案: