取消选中切换角度不起作用

Question

我不喜欢这个答案，因为：

请注意，此指令不应与 ngModel 一起使用，因为这可能会导致意外行为。

另外，我根本没有使用 ng-repeat。 IMO 这不是骗子。

我有 3 个离子切换开关。当我选中其中一个时，我想取消选中另外两个。 由于某种原因，它不起作用。忽略内联 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>

Answer 1

就个人而言，我不喜欢Ionic toggle group check one item and uncheck the others 中提到的解决方案。出于某种原因，标记中有ngModel 和ngChecked，但如文档中所述：

请注意，此指令不应与 ngModel 一起使用，因为 这可能会导致意外行为。

对于这个特殊的问题，删除 ngChecked 并简单地将 ngChange 与内联表达式一起使用就可以解决问题：

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