Calling function on ons-switch issue

Shubham Kaushik

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

Fran Diox

@Shubham-Kaushik

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