Question

我正在尝试制作一个如图所示的列表。我可以使用 ng-repeat 制作一个列表，但我的子元素与图片中显示的不一样为什么？我使用了嵌套的 ng-repeat ..请你告诉我在哪里做错了，如图所示制作相同的列表？ [！[在此处输入图像说明] [1]] [1]

这是我的代码 http://play.ionic.io/app/8a3d7bbaf403

  <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
      <ion-content>
      <ion-list>
        <ion-item  style="background-color:grey;" ng-repeat="item in collect track by $index">
          <p style="color:white;">{{item.childName }}</p>
          <ion-list>
  <ion-item ng-repeat="i in item.grandChildren">
    {{i.grandChildName}}!
  </ion-item>
</ion-list>
        </ion-item>
       </ion-list>
    </ion-content>

Answer 1

你必须从孩子那里删除填充物＆＃39;列出项目，然后仅在“孩子”周围添加相同的填充。标题。

我更改了你的html以使用类，我将标题包装在div

中

  <ion-header-bar class="bar-stable">
    <h1 class="title">Awesome App</h1>
  </ion-header-bar>
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="item in collect track by $index" class="child-item">
        <div class="child-title">{{item.childName }}</div>
        <ion-list>
          <ion-item ng-repeat="i in item.grandChildren">
            <span class="grandchild-name">{{i.grandChildName}}!</span>
            <span class="grandchild-count">{{i.grandChildCount}}</span>
          </ion-item>
        </ion-list>
      </ion-item>
    </ion-list>
  </ion-content>

然后在你的CSS中你可以使用这些类

.child-item {
   background-color: grey;
   padding: 0;
}
.child-title {
  text-transform: uppercase;
  color: white;
  padding: 16px;
  margin: -1px;
}
.grandchild-count {
  float: right;
  padding-right: 16px;
  font-weight: bold;
}

示例链接：http://play.ionic.io/app/2bb6c01bd2cb

输出现在看起来像这样：

[！[list output] [1]] [1]

如何增加离子列表的宽度？

1 个答案: