Angularjs “合并”；复选框“&&引用；阿凡达“；在离子框架列表中

我是一名noice程序员，不熟悉Ionic框架和Angular.js。我正在开发一款手机应用程序，主要使用的是“开箱即用”。但是，我想显示一个离子列表，它结合了：

• 复选框
• 项目内容（例如文本字符串）
• 化身（即，与物品相关联的图像）

见下面的模型

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>

组合复选框&；列表中的化身


项目#1


项目#2

但页面的显示方式如下：

我的问题是:

• 爱奥尼亚框架是否支持这种组合（在列表项中组合复选框和化身图像）
• 如果是这样，我可以使用什么标记或代码（HTML、CSS、JS）来呈现这种类型的显示

您可以通过以下简单示例查看代码：

---

感谢Stackoverflow社区的指导和指导

我认为，使用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>

大字标题
描述

我正在为同一个问题制定解决方案，我想出了这个css类：项目复选框img

只需将其添加到您的

ion复选框中的img标记中

您可以看到结果，图像已调整大小，其绝对位置将其放置在项目的右侧

angular.module（'ionicApp'，['ionic']））
.controller（'MainCtrl'，函数（$scope）{}）
正文{
游标：url（'http://ionicframework.com/img/finger.png汽车,；
}
.项目复选框img{
垂直对齐：中间对齐；
位置：绝对位置；
顶部：0px；
右：15px；
身高：100%；
}

切换
离子复选框
离子复选框
通过将复选框放在右侧（使用
项目复选框右侧
类），并用
0
覆盖
最小高度
，我可以将
项目化身
类与复选框组合起来

我的HTML：

<ion-content class="list">
  <ion-checkbox class="item-avatar item-checkbox-right" ng-repeat="user in connectedUsers">
    <img ng-src="{{user.picture}}">
    <h2>{{user.name}}</h2>
    <p>{{user.email}}</p>
  </ion-checkbox>
</ion-content>

我得到了如下结果：


.item-avatar,
.item-avatar .item-content,
.item-avatar-left,
.item-avatar-left .item-content {
  min-height: 0;
}