Ionic - Disable Range Selection with Toggle

Question

I have a problem when making an ionic app about disable a range selection script below cannot work as I expected below:

For controller script:

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

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

Any suggestion how to do it like my concept on this link?

Answer 1

You can declare $scope.disabled=true; in your controller and use it as ng-model for checkbox. On Discount Amount li tag use ng-if to check if checkbox is disabled or not . Here is a code pen http://codepen.io/anon/pen/YXVMaK

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

Answer 2

Adding this loggin directly into controller like you did works on Controller initialisation but not during the life of the controller. More over, as ionic cache a lot of pages, when you'll be back on your page, the controller will no be init again.

I suggest you to change your ng-disabled controller for :

ng-disabled="!checkbox.checked"