Currently, I'm working with AngularJS and trying to implement a switch functionality. My goal is to have the md-input-container disabled by default when the switch is turned off, and enabled again when the switch is turned on.
While my current setup partially works, I am facing an issue where the md-input-container remains enabled even after turning the switch off again.
Below is the HTML code snippet:
<div class="col-md-2">
<md-switch ng-click="toggleEnabled()">
Online Sales
</md-switch>
</div>
<div class="col-md-2">
<md-input-container class="md-block">
<label style="color: #e94e18;">Delivery Costs (€)</label>
<input ng-model="deliveryCosts" ng-disabled="isDisabled">
</md-input-container>
</div>
Javascript:
//disable md-input-container by default
$scope.isDisabled = true;
$scope.toggleEnabled = (function(){
$scope.isDisabled = !$scope.isDisabled;
});