Question

我有一个离子复选框，我想将其与图像结合使用，因此当用户点击图像或复选框时，它会被选中或取消选中。

附加图像，灰色区域代表图像。 Example image

到目前为止我的标记是：

<div class="col" style="padding-right:0px;">
<div class="list card">
  <div class="item item-image">
    <img src="img/xxx.png" style="width:100%; height:150px;">
  </div>
  <li class="item item-checkbox">
       Lorem ipsum
       <label class="checkbox">
         <input type="checkbox" ng-model="xxxx['xxxx']">
       </label>
    </li>
</div>
</div>

有什么想法吗？

Answer 1

您可以向图片添加ng-click指令“切换”用作<input>模型的变量，如下所示：

var app = angular.module('myApp', ['ionic'])
.controller('myController', function($scope) {

});

<html lang="en" ng-app="myApp">

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>example</title>
  <link rel="stylesheet" href="http://code.ionicframework.com/1.1.0/css/ionic.css">
  <script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.min.js"></script>
</head>

<body ng-controller="myController">
  <ion-view title="view">
    <ion-content>
      <div class="row">
        <div class="col-50" style="padding-right:0px;">
          <div class="card">
            <div class="item item-image" ng-click="value1 = !value1">
              <img src="img/xxx.png" style="width:100%; height:150px;">
            </div>
            <li class="item item-checkbox">
              Lorem ipsum 1
              <label class="checkbox">
                <input type="checkbox" ng-model="value1">
              </label>
            </li>
          </div>
        </div>
        <div class="col-50" style="padding-right:0px;">
          <div class="card">
            <div class="item item-image" ng-click="value2 = !value2">
              <img src="img/xxx.png" style="width:100%; height:150px;">
            </div>
            <li class="item item-checkbox">
              Lorem ipsum 2
              <label class="checkbox">
                <input type="checkbox" ng-model="value2">
              </label>
            </li>
          </div>
        </div>
      </div>
      <hr/>
      <pre>value1 = {{value1|json}}</pre>
      <pre>value2 = {{value2|json}}</pre>
    </ion-content>
  </ion-view>
</body>

</html>

离体复选框链接到展示中的图像

1 个答案: