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

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>