Skip to content Skip to sidebar Skip to footer
Home / Checkbox / Css / Html / Ionic Framework / Javascript

Ionic Checkbox Linked To Image In Showcase

Post a Comment
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 a

Solution 1:

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

});
<htmllang="en"ng-app="myApp"><head><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><title>example</title><linkrel="stylesheet"href="http://code.ionicframework.com/1.1.0/css/ionic.css"><scriptsrc="http://code.ionicframework.com/1.1.0/js/ionic.bundle.min.js"></script></head><bodyng-controller="myController"><ion-viewtitle="view"><ion-content><divclass="row"><divclass="col-50"style="padding-right:0px;"><divclass="card"><divclass="item item-image"ng-click="value1 = !value1"><imgsrc="img/xxx.png"style="width:100%; height:150px;"></div><liclass="item item-checkbox">
              Lorem ipsum 1
              <labelclass="checkbox"><inputtype="checkbox"ng-model="value1"></label></li></div></div><divclass="col-50"style="padding-right:0px;"><divclass="card"><divclass="item item-image"ng-click="value2 = !value2"><imgsrc="img/xxx.png"style="width:100%; height:150px;"></div><liclass="item item-checkbox">
              Lorem ipsum 2
              <labelclass="checkbox"><inputtype="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>

Post a Comment for "Ionic Checkbox Linked To Image In Showcase"