AngularJS 嵌套手风琴 ng-repeat

Question

我有一个 4 级模型，我需要为其创建嵌套手风琴。但是我不明白为什么当我点击 Child 时，所有的兄弟姐妹都会打开（或关闭）。

我正在使用 ui.bootstrap。这是我正在使用的代码（无论如何都是简短的版本）：

<div ng-controller="ProgramasController as vm">
    <accordion>
        <accordion-group ng-repeat="programa in programas" is-open="status.open">
            <accordion-heading>
                <i class="fa fa-lg" ng-class="{'fa-minus-circle': status.open, 'fa-plus-circle': !status.open}"></i> {{programa.xrmName}}
            </accordion-heading>
            <accordion close-others="false">
                <accordion-group ng-repeat="tipoDeAtencion in tiposDeAtencion" is-open="status.innerOpen">
                    <accordion-heading>
                        <i class="fa fa-lg" ng-class="{'fa-minus-circle': status.innerOpen, 'fa-plus-circle': !status.innerOpen}"></i> {{tipoDeAtencion.xrmName}}
                    </accordion-heading>
                    <div>
                        algo
                    </div>
                </accordion-group>
            </accordion>
        </accordion-group>
    </accordion>
</div>

Answer 1

您 programas 中的每个 programa 使用相同的 status.open 变量。

我认为您想切换到使用 programa 本身的属性，例如 programa.open；请注意，您可能希望在每个字段中将字段初始化为 false。

您需要对 status.innerOpen 应用相同的更改并将其切换为 tipoDeAtencion.open。

Answer 2

您可能希望使用迭代对象中的属性来处理打开状态，如下所示：

<div ng-controller="ProgramasController as vm">
<accordion>
    <accordion-group ng-repeat="programa in programas" is-open="programa.open">
        <accordion-heading>
            <i class="fa fa-lg" ng-class="{'fa-minus-circle': programa.open, 'fa-plus-circle': !programa.open}"></i> {{programa.xrmName}}
        </accordion-heading>
        <accordion close-others="false">
            <accordion-group ng-repeat="tipoDeAtencion in tiposDeAtencion" is-open="tipoDeAtencion.open">
                <accordion-heading>
                    <i class="fa fa-lg" ng-class="{'fa-minus-circle': tipoDeAtencion.open, 'fa-plus-circle': !tipoDeAtencion.open}"></i> {{tipoDeAtencion.xrmName}}
                </accordion-heading>
                <div>
                    algo
                </div>
            </accordion-group>
        </accordion>
    </accordion-group>
</accordion>

因此手风琴组的每一层及其项目打开状态都是唯一的。

AngularJS 嵌套手风琴 ng-repeat

AngularJS nested accordions with ng-repeat

accordion

angularjs