Uib 手风琴切换问题答案

【问题标题】：Uib accordion toggle issueUib 手风琴切换问题
【发布时间】：2017-12-19 09:21:53
【问题描述】：

我正在使用uibAccordion 切换不正确，如果我单击第一个重复元素，所有其他元素也会打开。下面是代码。

<ul>
    <li ng-repeat="(key, value) in scenariosViewAll.collectionBookObject">
        <div class="desc">
            <uib-accordion close-others="true" class="">                                                                                                                             
                <div uib-accordion-group id="{{$index+1}}" class="panel-default" is-open="status.open" is-disabled="true" prevent-click="false" ng-init="status.open = (key == scenariosViewAll.shared.currentSelectedAccordion) ? true : false" ng-class="{'opened': status.open}"  ng-if="value.length > 0">
                    <uib-accordion-heading>
                        <span class="accordion-toggle-wrapper">

                            <span class="accordion-title">
                                {{key}}
                            </span>
                            <span class="pull-right acc-icon-set">
                                <span class="collection-indicator">{{value.length}}</span>
                                   <span class="arrow-toggle">
                                       <button class="btn btn-icon" aria-hidden="true" ng-click="status.open = !status.open;">
                                          <i class="icon" ng-class="{'icon-chevron-up': status.open, 'icon-chevron-down': !status.open}"></i>
                                       </button>
                                   </span>
                               </span>
                           </span>
                    </uib-accordion-heading>
                </div>
            </uib-accordion>
        </div>
    </li>
</ul>

我尝试将 id 传递为 {{index+1}} 和 close-others="true"。但它不起作用

【问题讨论】：

看起来<span class="accordion-toggle-wrapper"> 缺少结束标记

标签： angularjs angular-ui-bootstrap

【解决方案1】：

这里

ng-init="status.open = (key == scenariosViewAll.shared.currentSelectedAccordion) ? true : false"

我真的不知道你将 status.open 绑定到什么，但显然这是错误的，而且非常模棱两可

简化它，例如给is-open一个属性，该属性为每个迭代的键/值引用不同的值，例如

ng-init="value.ui.isOpen = false;"
is-open="value.ui.isOpen"

如果您非常懒惰，并且不需要在控制器中访问这些变量，请不要将其绑定到任何东西

ng-init="isOpen = false;" // by now this is redundant and can be removed
is-open="isOpen"

这将起作用，因为ngRepeat 为它进行的每次迭代创建了一个新范围，因此将为每个这样的范围创建一个新的isOpen。

【讨论】：

【解决方案2】：

我通过传递索引得到了解决方案：

  <div uib-accordion-group  class="panel-default"  ng-init="status.open = false;" is-open="status.open[$index]"  prevent-click="false"  ng-class="{'opened': status.open}"  ng-if="value.length > 0">

【讨论】：

如果您对 ng-repeat 进行分页或过滤，这将中断