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

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

Log in to reply