Question

我在创建关于禁用下面的范围选择脚本的离子应用程序时遇到问题无法正常工作，如下所示：

对于控制器脚本：

.controller('SetDiscount', function($scope) {
    if ( $scope.checkbox = { checked: true }) {
         $scope.disabled = true
    } else {
         $scope.disabled = false
    }
});

对于模板HTML：

<ion-view view-title="Set Discount">
  <div class="bar bar-subheader">

  </div>

  <ion-content class="has-header has-subheader"> 
    <ul class="list">
      <li class="item item-toggle">
          Safe Discount
          <label class="toggle toggle-dark">
            <input type="checkbox" ng-model="checkbox.checked">
            <div class="track">
              <div class="handle"></div>
            </div>
          </label>
      </li>
      <li class="item range range-dark" >
        Discount Amount
        <input type="range" name="volume" min="0" max="100" value="33" ng-model="discount" ng-disabled="disabled">
      </li> 
    </ul>
  </ion-content>
</ion-view>

有任何建议如何像我的概念on this link那样做吗？

Answer 1

您可以声明$ scope.disabled = true;在您的控制器中，并将其用作复选框的ng-model。在折扣金额li标签上使用ng-if检查是否禁用了复选框。这是一支代码笔 http://codepen.io/anon/pen/YXVMaK

.controller('MyCtrl', function($scope, $timeout) {
    $scope.myTitle = 'Template';        
    $scope.data = { 'volume' : '5' };      
    $scope.disabled=true;
})

Answer 2

将此loggin直接添加到控制器中，就像您在控制器初始化时一样，但在控制器的生命周期内没有。更重要的是，作为离子缓存很多页面，当你回到页面上时，控制器将不会再次初始化。

我建议你更改你的ng-disabled控制器：

ng-disabled="!checkbox.checked"

离子 - 使用切换禁用范围选择

2 个答案: