angularjs - 在 ionic 框架列表中组合 "Checkbox"和 "Avatar"

Question

我是一名 noice 程序员，并且是 Ionic 框架和 Angular.js 的新手。我正在开发一个使用 Ionic 的移动应用程序，主要是“开箱即用”。但是，我想显示一个 Ionic 列表，它结合了:

• 复选框
• 项目内容(例如文本字符串)
• 头像(即与项目关联的图像)

请参阅下面的模型...

HTML 标记的简化示例如下所示:

  <ion-pane>
    <ion-header-bar class="bar-stable">
      <h1 class="title">Combine Checkbox &amp; Avatar in List</h1>
    </ion-header-bar>
  <ion-content>
    <ul class="list">

      <li class="item item-checkbox item-avatar-right">
        <label class="checkbox">
          <input type="checkbox">
        </label>
        <img src="http://placehold.it/100x100">
        Item #1
      </li>

      <li class="item item-checkbox item-avatar-right">
        <label class="checkbox">
          <input type="checkbox">
        </label>
        <img src="http://placehold.it/100x100">
        Item #2
      </li>

    </ul>
  </ion-content>
</ion-pane>

但是页面显示是这样的:

我的问题:

• Ionic 框架是否支持这种组合(在列表项中组合复选框和头像图像)？
• 如果是这样，我可以使用哪些标记或代码(HTML、CSS、JS)来呈现这种类型的显示？

您可以在此处查看带有简单示例的代码:

Plunker Example Code

感谢 Stackoverflow 社区的指导和指导!

Answer 1

我认为使用 Ionic 默认 CSS 将无法实现这一点。由于这些元素之间的 CSS 不兼容，也许你应该在一些 CSS 上调整一些位置。但是，我可以达到非常接近您所展示的内容。将以下项目放入您的 plunker 代码中并试一试:

<li class="item item-avatar-right item-checkbox">
    <img src="http://placehold.it/100x100">
    <label class="checkbox">
        <input type="checkbox">
    </label>
    <h2>Headline</h2>
    <p>Description</p>
</li>