Question

我需要一个基于AngularJS的多级手风琴来绑定后端的树数据结构，我遇到了这个https://github.com/LukaszWatroba/v-accordion。

它工作得非常好，除非它在控制器中每次更新数据时完全折叠（关闭任何扩展的子手风琴）。我在控制器中有一个定时器，它以一定的时间间隔（例如每3分钟）调用后端来汇集数据。我不知道这是否是手风琴的内置行为，但如果可以，这是如何解决的？

任何建议/帮助都将不胜感激。

Answer 1

<强>解决

我联系了这个插件的作者ŁukaszWątroba，在他的帮助下，我能够解决这个问题。想要分享他的反馈，以防任何人有类似的目标。

<强>解决方案：对于您的JSON数据结构，您需要再添加两个属性， 1）窗格的“id”和 2）窗格状态“isExpanded” - true / false

这两个属性专门为前端设计，以维持您可能与之交互过的任何窗格的展开 - 折叠状态。

  [
    {
      id: 'pane-1b',
      isExpanded: true,
      .................
      all your initial properies...
      .....................
    },
    {
      id: 'pane-2b'',
      isExpanded: false
      .................
      all your initial properies
      .....................
    },
    {
      id: 'pane-3b,',
      isExpanded: false
      .................
      all your initial properies
      .....................

      subpanes: [
        {
          id: 'subpane-1b',
          isExpanded: false
          .................
          all your initial properies
          .....................
        },
        {
          id: 'subpane-2b',
          isExpanded: false
          .................
          all your initial properies
          .....................
        }
      ]
    }
  ]

您的HTML将具有以下结构，其中“窗格”是您的JSON数据。

<v-pane id="pane.id" ng-repeat="pane in panes" expanded="pane.isExpanded">
    .................
     <!--For multi level HTML you would have a nested ng-repeat-->

     <v-pane id="subpane.id"  ng-repeat="subpane in pane.subpanes"    expanded="subpane.isExpanded">
     </v-pane>
    .............
</v-pane>

为什么AngularJS多级手风琴会因数据更新而崩溃？

1 个答案: