Angular js - Disable toggle switch

angularjs disable button from controller
angularjs disable button on condition
disable button in angular 6
angularjs toggle switch
angular disable button
disable button in angular 7
ng-disabled condition
ng-disabled not working

(using angular and typescript) I have a toggle switch directive as:

    return {
        restrict: 'E',
        scope: {
            ngModel: '=',
            onText: '@',
            offText: '@',
            title: '@',             
        },
        template:
        '<label class="switch-light well">' +
        '  <input type="checkbox" ng-model="ngModel">' +
        '  <span>' +
        '    {{title}}' +
        '    <span class="switch-light-option" ng-class="{ \'switch-light-checked\': !ngModel}">{{offText}}</span>' +
        '    <span class="switch-light-option" ng-class="{ \'switch-light-checked\': ngModel}">{{onText}}</span>' +
        '  </span>' +
        '  <a class="btn btn-primary"></a>' +
        '</label>'
    };

In my html I am using this as:

toggle-switch ng-model="myValues" on-text="Enabled" off-text="Disabled" 

Now I want to disable the above one. How can I do so.

I am pretty new to angular so any inputs would be appreciated.

Thanks

try adding the link code to your directive :

link: function ($scope, element, attrs) {
           $scope.somethingDisabled = true;
        };

and in your html part ng-disabled = somethingDisabled

then all you have to do is just add to the link function how and when you want to disabled either by passing it as an directive attr value or in the controller scope.

makes sense?

EDIT2

as per request I did something that would just show a proof of concept... here is the plunker.. plunker

 link: function ($scope) {
$scope.myclick = function(elem){
 setTimeout(function(){$scope.disabled = true;},0);
  setTimeout(function(){
    $scope.disabled=false;
    alert('db call done');
  },2000);
};

} I fixed the buggyness code might still be kinda ugly but Ill leave it to you to prettify it... the second timeout is the db call... first on is pushing the disable to the end of the stack so you'll see the animation.

if you want you can also just use !ngModel in the ng-disabled and then change the value of the ngModel when the db call come back..

good luck

ngDisabled, This directive sets the disabled attribute on the element (typically a form me to toggle: <input type="checkbox" ng-model="checked"></label><br/> <button  Angular-toggle-switch. AngularJS Toggle Switch. View the Project on GitHub JumpLink/angular-toggle-switch. Download ZIP File; Download TAR Ball; View On GitHub; angular-toggle-switch. Toggle Switches for AngularJS. Based off Bootstrap switch by Matt Lartentis. Installation. Download angular-toggle-switch.min.js or install with bower.

Use:

<toggle-switch
   ng-model="switchStatus"
   is-disabled="true">
</toggle-switch>

http://jumplink.github.io/angular-toggle-switch/

Demos > Switch, Switch (Disabled, Active). Switch (md-primary): No Ink. Switch 6 message: false. Switch (Inverted). Powered by Google ©2014–2020. Code licensed under the  Angular-toggle-switch. AngularJS Toggle Switch. View the Project on GitHub cgarvis/angular-toggle-switch. Download ZIP File; Download TAR Ball; View On GitHub; angular-toggle-switch. Toggle Switches for AngularJS. Based off Bootstrap switch by Matt Lartentis. Installation. Download angular-toggle-switch.min.js or install with bower.

I have the same issue and I used disabled attribute:

<toggle-switch  label-text="'Enable Internet Cash'" label-position="'top-center'" disabled="MyBankAccount.HasMoney"></toggle-switch>

the disabled attribute receive a Boolean expression. If the disabled attribute has true value it will disable the toogle-switch , in other case it will enable the toggle-switch.

consider that in js file there is $scope.MyBankAccount and $scope.MyBankAccount is json object with HasMoney property.

md-switch, Expression to be executed when the model value changes. ng-disabled expression, expression. En/Disable based on the expression. md-  /angular-toggle-switch forked from cgarvis/angular-toggle-switch. Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Angular ng-disabled Directive, AngularJS ng-disabled Directive. ❮ AngularJS Reference. Example. Disable / enable the input field: Disable form fields: <input  yeah not like disable i need to change color of label to grey if it is off. – manoji stack Jan 6 '15 at 12:16 You could use ng-class – Wayne Ellery Jan 6 '15 at 12:17 Create a class for disabled label.

Angular-toggle-switch by JumpLink, Toggle Switches for AngularJS. Based off Download angular-toggle-switch.min​.js or install with bower. $ bower install angular-bootstrap-toggle-switch --save <toggle-switch ng-model="switchStatus" is-disabled="true"> </toggle-switch>. AngularJS Toggle Switch. Contribute to cgarvis/angular-toggle-switch development by creating an account on GitHub.

AngularJS, It is usually applied on form field (input, select, button, etc). Syntax: <element ng-​disabled="expression"> Contents </element>. Example 1: This example uses  Definition and Usage. The ng-switch directive lets you hide/show HTML elements depending on an expression. Child elements with the ng-switch-when directive will be displayed if it gets a match, otherwise the element, and its children will be removed. You can also define a default section, by using the ng-switch-default directive,

Comments
  • Thanks for your reply. Basically when I toggle b/w enable and disable by clicking it makes makes a database call and gets some data. At this point I want to disable this control so that we dont keep on toggling again and again.
  • so wouldnt it be best to start it from the directive meaning ... the rest/db call is probably a factory/service.... so instead of link you can set a controller in the directive that calls the db call and in return changes the scope value thats in the directive... what Im saying is if you do it and you want it generic, wrap it all under the directive...
  • actually how I have designed our project is that there is not call from any directive. All calls to db are made from service itself. Is there any other way to do this. Someone had mentioned that we can make use of css and some changes to current directive to make this to work.
  • we are talking about disabling an html attribute right? if so just manually in your controller add the attribute ... not in css but I guess something like angular.element('myElement').attr('disabled','disabled');... again... its not good practice to manipulate DOM from services... thats what controllers and directives are for
  • sorry jony I am not able to work this on. Would you be able to provide some sample as in how to get this work. THanks