Ionic checkbox linked to image in showcase

Question

I have a ionic checkbox, which I want to combine with a image, so when the user clicks on either the image or checkbox, it gets checked or unchecked.

Image is attached, the grey area would represent the image. Example image

the markup i have so far is:

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

Any ideas?

beaver · Accepted Answer · 2016-01-20 10:28:39Z

You could add an ng-click directive to images "switching" the variable used as model for <input> as shown below:

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>

Collectives™ on Stack Overflow

Ionic checkbox linked to image in showcase

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related