Disable toggle switch

[Karan]

Hi,

(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" ></sts-toggle-switch>

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

[KJ]

Anyone??

[Sander Elias]

Hi KJ,

You will have better luck getting answers when you build us a plunk demonstrating your issue.

If you want to disable this, you have to factor in ng-disabled. However, I see some issues here. it's easy to disable the checkbox, But what are you going to do with your label and your span thingies?

Regards

Sander

[KJ]

Thanks.

I have created the plunker at:

http://plnkr.co/edit/NuRtjO7rfVNxH9WvntCK?p=preview

 

All info of directive, html, css and script is there.

So when some click either yes/no I want to disable the entire one for sometime till we get the data from the db.

Any inputs ..thanks

[Sander Elias]

Hi KJ,

Just add in the disabled switch. have a look at this: http://plnkr.co/edit/wFLNxoAWRI39kiInzBWv?p=preview

However, I could not find a way to let your css component show to the user that it is disabled. This is something you have to take care of. The disabled is working, however, the user is clueless that it is indeed disabled.

There are many ways to take care of that. I don't know what will fit in your surroundings. using ngHide and ngShow to show just the text in stead of the input replacement would suffer in a lot of cases I suppose.

Regards

Sander

[KJ]

Thanks Sander. With you code the disabled part works fine as once disabled one cannot click. But if you add disabled='false' then it still remains disabled.

[Sander Elias]

If KJ,

If you had tried it with an empty value, you would have seen that it worked. In your private scope object change disabled: '@' to disabled: '=',, and it will work.

Do you understand why?

Regards
Sander

​

[KJ]

Ok I understand. I think '=' is for two way binding and '@' is for one way.

I would try to work on the css part here and see if I can get that through.