如何在离子+角度制作列表？

Question

我正在尝试制作一个带有手风琴功能的列表。
我尝试向here 学习并尝试制作我自己的问题手风琴list。
我可以制作可折叠列表但是当我是外部对象时，我无法制作可折叠列表。

当我有外部对象时，你能告诉我如何制作这个列表，如图所示。

这是我的code：

  $scope.groups = [];
  for (var i=0; i<collect.length; i++) {
    $scope.groups[i] = {
      name: i,
      items: []
    };
    for (var j=0; j<collect.childItems[i].length ; j++) {
      $scope.groups[i].items.push(i + '-' + j);
    }
  }]

Answer 1

您实际上并不需要将您的 collect 项目数组推入另一个数组。 您正在链接的codepen 这样做会导致他们从头开始创建一个假数组。

您只需将您的collect 存储到您的groups 中：

$scope.groups = collect;

即使您可以简单地将对象数组直接放入您的 $scope.groups 而不定义 collect 对象。

并更改您的 HTML，使其能够以正确的方式循环：

  <ion-list>

    <div ng-repeat="group in groups">
      <ion-item class="item-stable"
                ng-click="toggleGroup(group)"
                ng-class="{active: isGroupShown(group)}">
          <div class="row">
              <div class="col">
                  <div class="custIcon"><img ng-src="{{group.iconURL}}" /></div>
              </div>
              <div class="col col-80 listHead">{{group.name}}</div>
                <div class="col"><div class="item-icon-right"><i class="icon" ng-class="isGroupShown(group) ? 'ion-ios-arrow-up' : 'ion-ios-arrow-down'"></i></div>
              </div>
        </div>
      </ion-item>
      <ion-item class="item-accordion"
                ng-repeat="item in group.childItems"
                ng-show="isGroupShown(group)">
          <div class="internalRow">{{item.childName}}</div>

      </ion-item>

    </div>
  </ion-list>

这里的ng-repeat使用group对象中存在的子集合childItems：

<ion-item class="item-accordion"
                ng-repeat="item in group.childItems"
                ng-show="isGroupShown(group)">
          <div class="internalRow">{{item.childName}}</div>

</ion-item>

这是您可能需要的sample。

更新：

这是一个带有子条目的改编：

    <ion-list>

        <div ng-repeat="group in groups">

          <ion-item class="item-avatar item-icon-right" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}">
            <img ng-src="{{group.iconURL}}">
            <div class="item-text-center item-text-wrap">{{group.name}}</div>
            <i class="icon" ng-class="isGroupShown(group) ? 'ion-ios-arrow-up' : 'ion-ios-arrow-down'"></i>
          </ion-item>

          <ion-item class="item-accordion item-icon-right" ng-repeat="item in group.childItems" ng-click="toggleSubGroup(item)" ng-show="isGroupShown(group)">
              <div class="item-text-center item-text-wrap">{{item.childName}}</div>
              <i class="icon" ng-class="isSubGroupShown(item) ? 'ion-ios-arrow-up' : 'ion-ios-arrow-down'"></i>

              <div class="item-accordion sub-item" ng-repeat="child in item.grandChildren" ng-show="isSubGroupShown(item)">
                  <div class="item-text-center item-text-wrap">{{child.grandChildName}}</div>
              </div>

          </ion-item>

        </div>

    </ion-list> 

我们有 2 个<ion-item>。第一个用toggleGroup(group) on ng-click 控制第二个。

第二个包含一个<div class="item-accordion sub-item">，由其父级通过toggleSubGroup(item) 操作。

这是source，以防万一有人感兴趣……还有codepen。

Answer 2

您的代码中存在 javascript 错误：

WRONG: collect.childItems[i].length
RIGHT: collect[i].childItems.length

更好：

$scope.groups = [];
collect.forEach(function(item, i) { 
  var group ={
    name: i,
    items: []
  };
  $scope.groups.push(group);
  item.childItems.forEach(function(child, j) {
    group.items.push(i + '-' + j);
  });
});