CODEWITHSUNDEEP
angularjsionic-frameworktoggle
1x2x3x4x
1x2x3x4x

Reputation: 604

uncheck toggle angular won't work

I don't like that answer because of this:

Note that this directive should not be used together with ngModel, as this can lead to unexpected behavior.

Also, I'm not using ng-repeat at all. IMO it's not a dupe.

I have 3 ionic toggles. When I check one of them I want to uncheck the other two. For some reason it's not working. Ignore the inline css.

<div class="list">
    <ion-toggle ng-model="production" toggle-class="toggle toggle-big" ng-checked=" !washingup || !dispensing""> <img src="img/production5.png" height="50" width="50" align="left" /><p style="padding-top: 14px; padding-left: 8px;">Production</p>
    </ion-toggle>         
    <ion-toggle ng-model="dispensing" toggle-class="toggle toggle-big" ng-checked=" !washingup || !production"> <img src="img/dispensing1.png" height="50" width="50" align="left" /><p style="padding-top: 14px; padding-left: 8px;">Dispensing</p>
    </ion-toggle>       
    <ion-toggle ng-model="washingup" toggle-class="toggle toggle-big" ng-checked=" !production || !dispensing"> <img src="img/washingUp1.png" height="50" width="50" align="left" /><p style="padding-top: 14px; padding-left: 8px;">Washing up</p>
    </ion-toggle>
</div>

Upvotes: 0

Views: 72

Answers (1)

Stanislav Kvitash
Stanislav Kvitash

Reputation: 4622

Personally, I don't like the solution mentioned in Ionic toggle group check one item and uncheck the others. For some reason there is ngModel together with ngChecked in the markup, but as described in the docs:

Note that this directive should not be used together with ngModel, as this can lead to unexpected behavior.

For this particular question removing ngChecked and simply using ngChange with inline expression could do the trick:

<div class="list">
    <ion-toggle ng-model="production" toggle-class="toggle toggle-big" 
        ng-change="production && (dispensing = washingup = false)"> 
        <img src="img/production5.png" height="50" width="50" align="left" />
        <p style="padding-top: 14px; padding-left: 8px;">Production</p>
    </ion-toggle>         
    <ion-toggle ng-model="dispensing" toggle-class="toggle toggle-big" 
        ng-change="dispensing && (production = washingup = false)"> 
        <img src="img/dispensing1.png" height="50" width="50" align="left" />
        <p style="padding-top: 14px; padding-left: 8px;">Dispensing</p>
    </ion-toggle>       
    <ion-toggle ng-model="washingup" toggle-class="toggle toggle-big" 
        ng-change="washingup && (dispensing = production = false)"> 
        <img src="img/washingUp1.png" height="50" width="50" align="left" />
        <p style="padding-top: 14px; padding-left: 8px;">Washing up</p>
    </ion-toggle>
</div>

Upvotes: 1

Related Questions