单击离子切换按钮显示确认对话框

时间:2016-05-31 10:28:49

标签: angularjs ionic-framework toggle angularjs-ng-change

我有一个与$ scope.checked链接的切换,当我单击切换按钮时我想在更改切换值之前显示确认对话框。 我该怎么做 ? HTML:

<ion-toggle ng-model="settings_option" toggle-class="toggle-calm"     **ng-change="showConfirm(settings_option)"** ng-checked="settings_option">
Setting Options
</ion-toggle>

JS:

$rootScope.showConfirm = function(newVal) {
    if(newVal == true){
        console.log("start false !!!")
        var confirmPopup = $ionicPopup.confirm({
         title: 'Mode configuration',
         template: 'voulez-vous vraiment activer cette option?'
       });

       confirmPopup.then(function(res) {
        console.log("RES :: "+res);
         if(res) {
           window.localStorage.setItem("settings_option", "true");
           $rootScope.settings_option = false;
         } else {
           console.log($rootScope.settings_option);
           $rootScope.settings_option = false;
           console.log($rootScope.settings_option);
         }
       });
    }
    else{
        window.localStorage.setItem("settings_option", "false");
       $rootScope.settings_option = false;
    }

 }

1 个答案:

答案 0 :(得分:0)

试试这个

<li class="item item-toggle">
 Setting Options
 <label class="toggle toggle-calm">
   <input type="checkbox" ng-model="settings_option" ng-change="showConfirm(settings_option)" ng-true-value="yes" ng-false-value="no">
   <div class="track">
     <div class="handle"></div>
   </div>
 </label>
</li>

控制器

$rootScope.showConfirm = function(newVal) {
if(newVal == "yes"){
    console.log("start false !!!")
    var confirmPopup = $ionicPopup.confirm({
     title: 'Mode configuration',
     template: 'voulez-vous vraiment activer cette option?'
   });

   confirmPopup.then(function(res) {
    console.log("RES :: "+res);
     if(res) {
       window.localStorage.setItem("settings_option", "yes");
       $rootScope.settings_option = "yes";
     } else {
       console.log($rootScope.settings_option);
       $rootScope.settings_option = "no";
       console.log($rootScope.settings_option);
     }
   });
}
else{
    window.localStorage.setItem("settings_option", "no");
   $rootScope.settings_option = "no";
  }
 }
相关问题