Disable Toggle using ng-disabled


#1

Hello, I’m trying to disable a toggle based on another toggle’s value. The angular way suggest this:

<input type="checkbox" ng-model="check"> </input>
<input type="checkbox" ng-disabled="check">Checkbox to be disabled</input>

like in this fiddle http://jsfiddle.net/DotDotDot/FJf4v/11/
However, using ionic toggle directive I can’t make this possible. This is my markup

<form>
            <ul class="list"> 
                <li class="item item-toggle">
                    Activate Fraud Alert reminder
                    <toggle ng-model="alertIsActive" ng-true-value="1" ng-false-value="0"></toggle>
                </li>           
            </ul>
            <div class="list">
                <label class="item item-input item-stacked-label">
                    <span class="input-label white">Date Field</span>
                    <input type="date" ng-model="startDt" ui-date ng-disabled="alertIsActive == 0">
                </label>
            </div>
            <ul class="list"> 
                <li class="item item-toggle">
                   Toggle1
                    <label class="toggle">
                        <input type="checkbox" ng-disabled="alertIsActive == 0">
                        <div class="track">
                            <div class="handle"></div>
                        </div>
                    </label>
                </li>
                <li class="item item-toggle" ng-disabled="alertIsActive == 0">
                    Toggle2
                    <toggle type="checkbox"  ng-disabled="alertIsActive == 0"></toggle>
                </li>  
            </ul>
        </form>

I tried using ng-true-value=1 and ng-false-value=0 cause that came up in my research, but it didn’t make any difference. When I switch the first toggle on/off, the date input gets disabled just right, however, the other two toggles don’t. I use the two different forms to create toggles as in the documentation. Using the long form (Toggle1) the toggle never gets disabled. Using the second form (Toggle2) the toggle is always disabled. I’ve seen some issues about radio and toggles in ionic’s github about they being a little bit broken, but i don’t know if this issue is related. Thanks in advance.


#2

Okay, I just pushed a fix for this.

You’ll want to use the toggle directive:

<toggle ng-model="data.isOn" ng-disabled="isDisabled"></toggle>

Then, the toggle will work or not work based on the value in the isDisabled field.

Does that help?


#3

Well, that worked, thanks! In web works as I expected,but when i tested on device, the toggles that were created using the toggle directive didn’t work. I found out that if i add the scroll=“false” to my content, they do respond, a little bit slow, but i’m ok with it. I don’t know why the scroller is messing with the toggle. I think for the moment i can survive with adding scroll=false to the content, but i just say it so you can improve this great tool.


#4

Hello again. This stopped working for the last release 0.9.22 ( I think since the previous one, 0.9.21, when you changed the directive for the toggles) . Is there a new way to disable the toggles now? Thanks in advance.


#5

Bump! I’d also like to know this :smiley:


#6

Added in this commit.

Try the nightly build and let me know how it works :slight_smile:


#7

Also, opened an issue about adding disabled style for toggle element: https://github.com/driftyco/ionic/issues/541