离子更新复选框值

Question

我正在尝试在用户选择取消选项时将 Toggle/Checkbox 值更新回 default/Off。目前它坚持 Red/On.

任何解决这个问题的建议都很好，

之前

警报

之后

控制器

// Default Value
  $scope.turnClearAppData = 'Off';
  // Ionic OK Alert
  $scope.showConfirm = function(val) {
    if ( val == 'On') {
      var confirmPopup = $ionicPopup.confirm({
        title: 'Clear App Data',
        template: 'Select OK to Confirm!'
      });
      confirmPopup.then(function(res) {
        if(res) {
          // Reset LocalStorage Data
          $localStorage.$reset();
          // Redirect After Reset
          $location.path('/intro/part-one');
        } else {
          // On Cancel Update Value
          $scope.turnClearAppData = 'Off';
        }
      });
    }
  };

HTML

    <li class="item item-toggle noborder">
      Clear App Data {{turnClearAppData}}
       <label class="toggle toggle-assertive">
         <input type="checkbox" ng-model="turnClearAppData" ng-true-value="'On'" ng-false-value="'Off'" ng-change="showConfirm(turnClearAppData)">
         <div class="track">
           <div class="handle"></div>
         </div>
       </label>
    </li>

Answer 1

在更新范围变量值不更新相关更改的情况下尝试使用$timeout。试试这个。

// Default Value
  $scope.turnClearAppData = 'Off';
  // Ionic OK Alert
  $scope.showConfirm = function(val) {
    if ( val == 'On') {
      var confirmPopup = $ionicPopup.confirm({
        title: 'Clear App Data',
        template: 'Select OK to Confirm!'
      });
      confirmPopup.then(function(res) {
        if(res) {
          // Reset LocalStorage Data
          $localStorage.$reset();
          // Redirect After Reset
          $location.path('/intro/part-one');
        } else {
          // On Cancel Update Value
          $timeout(function () {
             $scope.turnClearAppData = 'Off';
          }, 0);
        }
      });
    }
  };

Answer 2

问题在范围内
我几天前提出了一个问题，我有一些指向一些教程的链接，它们告诉你为什么你应该避免使用范围作为模型。

最好的解决方案是避免$scope 附加您的视图模型。

你可以看看这个 plunker 你的示例工作的地方。

我使用了 ControllerAs 语法来解决这个问题。

实施起来非常容易。在我的 plunker 中，我在 state:

中定义了 ControllerAs

.state('home', {
    url: '/home',
    templateUrl: 'home.html',
    controller: 'HomeController as vm'
});

但您可以通过许多其他方式做到这一点：

<div ng-controller="HomeController as vm">

</div>

现在在你的控制器中创建你的视图模型：

.controller('HomeController', function($scope, $state, $timeout, $ionicPopup)     {

   var vm = this;

   vm.turnClearAppData = 'Off';

   vm.showConfirm = function(val) {
     if ( val === 'On') {
      var confirmPopup = $ionicPopup.confirm({
        title: 'Clear App Data',
        template: 'Select OK to Confirm!'
      });
      confirmPopup.then(function(res) {
        if(res) {
          // Reset LocalStorage Data
          // $localStorage.$reset();
          // Redirect After Reset
          // $location.path('/intro/part-one');
          alert('Ok pressed!');
        } else {
          // On Cancel Update Value
          vm.turnClearAppData = 'Off';   
          return vm.turnClearAppData;
        }
      });
    }
  };

});

注意 var vm = this 作为第一个表达式。现在您所有的对象和方法都映射到视图模型上 (vm)。

您的 HTML 现在可以使用视图模型

<li class="item item-toggle noborder">
      Clear App Data {{vm.turnClearAppData}}
       <label class="toggle toggle-assertive">
         <input type="checkbox" ng-model="vm.turnClearAppData" ng-true-value="'On'" ng-false-value="'Off'" ng-change="vm.showConfirm(vm.turnClearAppData)">
         <div class="track">
           <div class="handle"></div>
         </div>
       </label>
</li>

获得预期的行为。

离子更新复选框值

Ionic update Checkbox value

angularjs

controller

ionic-framework

alert

ionic