Monaca Onsen UI Discord Chat Github Repo

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" />
    <ons-col class="col ons-col-inner">
    <span style="float:left;color:rgb(117, 108, 108)">
    <ons-switch modifier="material" style="float:right;" ng-model="calFirst_switch">
    <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" />
    if ($scope.calFirst_switch == false)
    $scope.calFirst_switch = true;
    $scope.calFirst_switch = false;

  • Onsen UI


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