Calling function on ons-switch issue
-
I am calling a function on click of content inside ons row. The same row also have ons-switch inside it but when i click on switch function call is not working properly. Suggest me the solution please.
<div style="margin:10px" class="cardalike"> <div style="margin-top:10px"> <!--<ons-row class="row ons-row-inner" style="padding-right:5px;" ng-click="calFirst_switch.checked()?calFirst_switch.setChecked(false):calFirst_switch.setChecked(true);">--> <ons-row class="row ons-row-inner" style="padding-right:5px;" ng-init="calFirst_switch=false" ng-click="switch_change()"> <div style="width:50px;"> <img src="icons/calender.png" style="margin-left:13px;" class="medium_icon" /> </div> <ons-col class="col ons-col-inner"> <div> <span style="float:left;color:rgb(117, 108, 108)"> {{currentLocale.JourneyDate}} </span> <ons-switch modifier="material" style="float:right;" ng-model="calFirst_switch"> </ons-switch> </div> </ons-col> </ons-row> </div> <div ng-if="calFirst_switch==true"> <div style="height: 35px;margin-left:50px"> <input type="text" style="width:200px;float:left;" class="form-control" datepicker-popup="{{format}}" ng-click="open($event)" ng-model="$parent.dt" is-open="status.opened" min-date="{{minnDate}}" max-date="{{maxxDate}}" datepicker-options="searchdateOptions" ng-required="true" readonly close-text="Close" /> </div> </div> $scope.switch_change=function() { if ($scope.calFirst_switch == false) { $scope.calFirst_switch = true; } else $scope.calFirst_switch = false; }
-
ons-switch
automatically changes its own value on click. After that, your function runs and changes its value again. Therefore, the switch is changed twice instead of just once.There is a simple way to do this without functions. Just wrap everything inside
<label>
element and it will trigger the input on click. You can removeswitch_change()
function. If for some reason you have more than 1 input inside the label, use<label for="myInput>"
and<ons-switch input-id="myInput">
<label> <ons-row> <ons-col>...</ons-col> <ons-col><ons-switch></ons-switch></ons-col> </ons-row> </label>