时间戳

首页 > 解决方案 > Angular中的多维数组手风琴

javascript - Angular中的多维数组手风琴

问题描述

http://plnkr.co/edit/v11KtXMsABkJa2dS

当我们有如下数组时：

 $scope.groups = [
  "abc": [
    {
      title: "Title - 1",
      content: "Content - 1"
    },
    {
      title: "Title - 2",
      content: "Content - 2"
    }
  ],
  "def": [
    {
      title: "Title - 3",
      content: "Content - 3"
    },
    {
      title: "Title - 4",
      content: "Content - 4"
    }
  ] 
];

想要将键显示为手风琴标题并单击显示标题和内容对的列表。

<uib-accordion close-others="oneAtATime">
    <uib-accordion-group ng-repeat="(group, grlist) in groups" ng-scroll="(group, grlist) in groups" is-open="group.isOpen" ng-click="updateOpenStatus()">
        <uib-accordion-heading>
            {{group}}
        </uib-accordion-heading>
        <div ng-repeat="val in grlist" class="list-group-item">
                <span>{{val.title}}</span>
                <span>{{val.content}}</span>
          </div>

    </uib-accordion-group>
</uib-accordion>

此外，如果每组的（标题，内容）对数量非常大，是否可以使用刷新按钮分批显示 10 个？

标签： javascriptangularjsaccordion

解决方案

显示前 10 个项目和“显示更多”按钮。如果用户单击“显示更多”按钮，则将加载下一个 10。

<div ng-init="page=0">
  <div ng-repeat="val in grlist.slice(page, page+10)" class="list-group-item">
     <span>{{val.title}}</span>
     <span>{{val.content}}</span>
  </div>
  <span>Page: {{page + 1}}</span>
  <button ng-click="page = page + 1">Show more</button>
</div>

推荐阅读