【问题标题】:Is there md-checkbox multiple selection available in angular2 Material?angular2 Material中是否有md-checkbox多重选择?
【发布时间】:2017-07-17 00:42:06
【问题描述】:
我检查了文档,但很遗憾我没有幸运地到达我想要的目的地。
我有一个行表。在每一行我都有一个md-checkbox,我可以选择哪个好。但我想提供该用户应该能够在两个选定复选框之间选择多个复选框的功能。例如,如果我选择顶部的复选框,然后选择底部的复选框,则应该选择它们之间的所有内容。这与 gmail 多选非常相似。
类似的东西。
这可能与angular2中的md-checkbox有关吗?
【问题讨论】:
标签:
angular
typescript
checkbox
angular-material2
multipleselection
【解决方案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