所有手风琴在打开/关闭ONE时都会打开和关闭一次

时间:2015-12-03 22:20:09

标签: angularjs twitter-bootstrap-3 angular-ui-bootstrap

我使用角度bootstrap ui 0.14.3。

当我点击任何动态生成的手风琴时,它们全部打开/关闭。这里有点不对劲。

我只想要那个我点击打开/关闭的那个。

我已经设置了close-others =" true"但那不起作用......

我错了什么?

HTML

 <uib-accordion close-others="true">
            <uib-accordion-group is-open="status.isFirstOpen" ng-repeat="t in tests">
                <uib-accordion-heading>
                    {{t.schoolclassCode}}

                    <span style="background:orange;">{{t.type}}</span>
                    <span style="background:green;">{{t.number}}</span>
                    <span style="background:aliceblue;">{{t.date}}</span>
                    <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isFirstOpen, 'glyphicon-chevron-right': !status.isFirstOpen}"></i>
                </uib-accordion-heading>
                My dynamic content
            </uib-accordion-group>
        </uib-accordion>

控制器

  function TestsController($scope, tests) {

        $scope.tests = tests;

        $scope.oneAtATime = true;


        $scope.status = {
            isFirstOpen: true,
            isFirstDisabled: false
        };
    }

1 个答案:

答案 0 :(得分:3)

这是因为您的is-open="status.isFirstOpen"uib-accordion-group中的变量相同。当您打开或关闭其中一个手风琴时,其他人正在观看相同的变量并将执行相同的操作。您必须使用数组才能为每个手风琴组定义一个唯一变量。我给你做了一个例子here

<uib-accordion close-others="false">
<uib-accordion-group ng-repeat="group in groups track by $index" is-open="accordionArray[$index]">
  <uib-accordion-heading>
    {{group.title}}
    <i class="pull-right glyphicon" ng-class="accordionArray[$index] ? 'glyphicon-chevron-down':'glyphicon-chevron-right'"></i>
  </uib-accordion-heading>
  {{group.content}}
</uib-accordion-group>

 这在控制器$scope.accordionArray = []