When in Read Only mode cannot change switch state from the code

[MobileDevVT]

Hi,
I want to make the switch read only (so that user cannot change its value). But I get the value of the switch as a result of HTTP request. In my HTML file I used

<input bs-switch type="checkbox"
switch-readonly="true"
switch-size="small"
switch-on-text="YES"
switch-off-text="NO"
switch-on-color="success"
switch-off-color="danger"
ng-true-value="'true'"
ng-false-value="'false'"
ng-model="myController.myValue" //this is boolean

I have realized that ng-disabled does not work on bs-switch. It just stays enabled.
If I use switch-readonly=true or switch-active="false" the switch is read only but since myController.myValue is not resolved the switch is in undetermined state and it stays in it even after myController.myValue gets resolved. How can I change the state of the switch (to YES or NO) and afterward set it to readonly? I get value of my ng-model via HTTP request.

Thanks

[frapontillo]

Please read this first.

[MobileDevVT]

Hi,
Here is my plunk
http://plnkr.co/edit/wjHBiOAVcKrQer8K3roC?p=preview

When I define the HTML file I am not aware will the switch value be true or false. I have to ask the server to get the value. At the same time I want the page to be read only (I only want to show the user the values, I don't want to allow user to edit them).

1. Please take a look at my Plunk under 1). All the switches are undefined - because I still haven't received the answer from the server. Lets pretend that when you press the button "toggle model" this simulates the response from the server. As you can see only the "switch-active=true" and "switch-readonly=false" switches can be edited from the code. The problem is that they can also be edited by the user by clicking on them.
   a) why do switch-active and swich-readonly do the same thing?
   b) how can I prevent user from changing the value (from the UI) but still change the value programatically?

2. Please take a look at my Plunk under 2). Ng-disabled is not working. In my Plunk I have 2 big divs with class="well". The second one has . Please note that input field and checkbox are disabled by ng-disable. User cannot edit them but their values change due to changes in ng-model .
   a) Why does ng-disabled not affect ng-switch

Thanks :)

[dborjas]

Hi There,

I am also expericing the exact behavior that @MobileDevVT is describing. I want to show a page where a user can see some details but cannot modify them. But when I try to use either switch-readonly=true or switch-active=false (which gets set by the server and not hardcoded directly, because I also need to wait for the server to give me a response), the switch shows in a inderteminate state (right in the middle). I think whats happening is that once the tag is disabled with either switch-readonly=true or switch-active=false, it does not pay attention/care about when the ng-model changes.

Can you please fix this bug.
Gracias,

[adestis-ds]

Same problem here - also tested with version 0.5.0!

[Sheparzo]

I have this issue too

[sh8]

+1

[frapontillo]

I have just had some time to check this issue.

Wrt the first problem, switch-active mirrors the disabled attribute bootstrap-switch, while switch-readonly mirrors readonly. If you check the Examples page on the plugin site, you can verify that the original plugin doesn't allow the wanted behavior:

// does nothing on a disabled switch
$('#switch-disabled').bootstrapSwitch('toggleState');
// does nothing on a readonly switch
$('#switch-readonly').bootstrapSwitch('toggleState');

If you need this, please open a bug on the parent plugin and when that's solved you can open a new integration issue here.

For the second problem, ng-disabled is not supported, that's what you have switch-active for.