Question

我有一个4级模型，我需要创建嵌套的手风琴。但是我无法弄清楚为什么当我点击一个孩子时，所有的sibbligs都打开（或关闭）。

我正在使用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

programa中的每个programas使用相同的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嵌套手风琴

2 个答案: