0

我查過了文檔,但可惜我沒有幸運地到達我想要的目的地。在angular2材質中是否有md-checkbox多選可用?

我有一個行的表。在每一行中我都有一個md-checkbox,我可以選擇哪一個很好。但我想提供的功能,該用戶應該能夠選擇兩個選定的複選框之間的多個複選框。例如,如果我選擇頂部複選框,並選擇底部複選框,則應選擇它們之間的所有內容。這與gmail的多重選擇非常相似。

就像這樣。

在angular2中可以這樣做md-checkbox嗎?

回答

1

沒有內置的支持,但你可以自己動手。

@ViewChildren(MdCheckbox) checkboxes; 

    private _lastSelected; 

    private cbClick(index: number, event: any) { 
    if (this._lastSelected >= 0 && event.shiftKey) { 
     let cbs = this.checkboxes.toArray(); 
     if (cbs[this._lastSelected].checked) { 

     let firstIndex = index >= this._lastSelected ? this._lastSelected : index; 
     let lastIndex = index >= this._lastSelected ? index : this._lastSelected; 

     cbs.slice(firstIndex, lastIndex + 1).forEach(c => c.checked = true); 
     } 
    } 

    this._lastSelected = index; 
    } 
<div *ngFor="let o of options; let idx = index"> 
    <br /> 
    <md-checkbox (click)="cbClick(idx, $event)">{{ o }}</md-checkbox> 
    </div> 

見我的工作演示:http://plnkr.co/edit/IiBJpv18zv656ZrTFxAn?p=preview

相關問題