Angular js - Disable toggle switch

Question

(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

J. Soares · Accepted Answer · 2018-09-19 21:01:34Z

1

Use:

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

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

answered Sep 19, 2018 at 21:01

J. Soares

1574 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 11, 2015 at 5:44

Jony-Y

1,5791 gold badge13 silver badges31 bronze badges

8 Comments

aman Over a year ago

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.

Jony-Y Over a year ago

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

aman Over a year ago

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.

Jony-Y Over a year ago

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

aman Over a year ago

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

|

Luis Fernando Camacho Camacho · Accepted Answer · 2019-08-28 14:42:10Z

0

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.

answered Aug 28, 2019 at 14:42

Luis Fernando Camacho Camacho

1,1401 gold badge12 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angular js - Disable toggle switch

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related