javascript - 如何增加 ionic 列表的宽度？

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

您必须从“子”列表项中删除填充，然后仅在“子”标题周围添加相同的填充。

我对你的 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

现在的输出如下所示:

[![列表输出][1]][1]