Angularjs 离子更新复选框值

当用户选择“取消”选项时，我试图将“切换/复选框”值更新回默认值/关闭。目前它坚持红色/开

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

之前


警报


之后

控制器

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

清除应用程序数据{{turnClearAppData}}

在更新范围变量值不会更新相关更改的情况下，尝试使用

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

---

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

最好的解决方案是避免

$scope

附加视图模型

你可以在你的样品工作的地方看看这个

我使用了一种语法来解决这个问题

它很容易实现。在我的plunker中，我定义了状态中的控制器：

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

但是你可以用很多其他的方法：

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

</div>

注意第一个表达式是

var vm=this

。 现在，所有对象和方法都映射到viewmodel（

vm

）上

您的HTML现在可以与viewmodel一起使用

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

清除应用程序数据{{vm.turnClearAppData}}

---

获取预期行为。

我已尝试上述操作，单击“取消”时切换仍为红色，是否还有其他建议？尝试将超时增加到400毫秒或更高。尝试增加或减少超时，单击“取消”时复选框仍设置为红色，有进一步的建议吗？你能设置一个plunkr吗？谢谢你的深入解释/回答，它工作得很好。最后一件事，我是否会将VM添加到此控制器中其余的$scopes中$作用域。$storage=$localStorage$scope.turnNotifications='Off'$scope.turnGeolocation=‘关闭’；vm.turnClearAppData='Off'；很高兴我帮了忙。我建议您永远不要使用$scope来存储您的模型；你的数据。使用Controllera，您可以使用vm来“范围”变量和方法。它更易于阅读，并且修复了您可能发现的所有范围问题。在我的答案的开头有一个链接到另一个答案，在那里你可以观看一段视频，其中解释了一些事情。

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