3. Calling function on ons-switch issue

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Calling function on ons-switch issue

  • S

    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;
}
    0 1 Reply
  • Onsen UI

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