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