在 Ionic 框架列表中组合“复选框”和“头像”答案

【问题标题】：Combine "Checkbox" & "Avatar" in an Ionic Framework List在 Ionic 框架列表中组合“复选框”和“头像”
【发布时间】：2016-08-12 10:35:11
【问题描述】：

我是一名 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 社区的指导和指导！

【问题讨论】：

标签： angularjs listview ionic

【解决方案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>

【讨论】：

【解决方案2】：

通过将复选框放在右侧（使用item-checkbox-right 类）并用0 覆盖min-height，我能够将item-avatar 类与复选框组合起来。

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

我还必须添加以下 CSS 规则：

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

我得到如下结果：

【讨论】：

【解决方案3】：

我正在为同样的问题寻找解决方案，我想出了这个 css 类：item-checkbox-img

只需将其添加到 ion-checkbox 的 img 标签中即可

你可以看到结果in this codepen，图片被调整大小并且它的绝对位置放到了item的右边

angular.module('ionicApp', ['ionic'])
  .controller('MainCtrl', function($scope) {});

body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.item-checkbox-img {
  vertical-align: middle;
  position: absolute;
  top: 0px;
  right: 15px;
  height: 100%;
}

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <title>Toggles</title>
  <link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet">
  <script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>
</head>

<body ng-controller="MainCtrl">
  <ion-list style="height: 2000px">
    <ion-checkbox>ion-checkbox
      <img class="item-checkbox-img" src="http://placehold.it/350x150">
    </ion-checkbox>
    <ion-checkbox>ion-checkbox
      <img class="item-checkbox-img" src="http://placehold.it/100x100">
    </ion-checkbox>
  </ion-list>
</body>

</html>

【讨论】：