角2，* ng對於複選框只選中一個

我正在嘗試使用*ngFor複選框創建一個動態列表。在這裏，我希望一次只能選中一個複選框（如果用戶點擊之前選擇的第二個複選框，則應該取消選中）。角2，* ng對於複選框只選中一個

<div class="img-prev col-md-12" *ngFor="let imgList of uploadedImg; let i = index"> 
    <div class="col-md-1"> 
     <input [ngModel]= "selectImg" (click)="updateSelection(i, imgList)" type="checkbox" /> 
    </div> 
</div>

來源

2017-01-23 sibi

你可以發佈你的updateSelection方法？由於複選框的默認行爲是多重選擇，您需要取消選中所有複選框，然後選擇該索引複選框。 –

如果您只想選擇一個選項，您應該有一個單選按鈕。如果你喜歡，你可以將你的單選按鈕設計成複選框。 – JSNinja

固定。 understoop。（點擊）=「updateSelection（i，imgList）」type =「checkbox」/> updateSelection（imglistIndex，imgFile）{this.selectImg = imglistIndex; }任何人都請確認，這是有效的方法。 – sibi

實現一個自定義ISelectable接口會更有效率，像這樣。

export interface ISelectable { 

selected?: boolean;}

然後，對於要表示可選UI元素的每個對象，都可以實現ISelectable。

如：

export class SelectableImg implements ISelectable....

然後你的模板裏面你可以控制[檢查]與img.selected結合。

<div class="img-prev col-md-12" *ngFor="let imgList of uploadedImg; let i = index"> 
    <div class="col-md-1"> 
     <input [ngModel]= "selectImg" [checked]="imgList.selected"(click)="updateSelection(i, imgList)" type="checkbox" /> 
    </div>

創建deselectAll方法：

private deselectAll(arr: any[]){ 
arr.forEach(val =>{ 
    if(val.selected){ 
     val.selected = false; 
    } 
})}

而且你的事件處理程序

private updateSelection(selectedOption){ 

let selected = selectedOption.selected; 

this.deselectAll(this.allVals); 

selectedOption.selected = !selected; 
}

來源

2017-01-23 17:21:32

角2，* ng對於複選框只選中一個

回答

相關問題