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