Мы видели эту общую функцию в электронных письмах или всякий раз, когда мы выбираем что-либо на других платформах.
Всякий раз, когда мы устанавливаем все флажки в списке, флажок в заголовке таблицы отображается отмеченным.
Если в списке не установлен ни один флажок, флажок не установлен.
Но что, если мы выберем некоторые из списков только для того, чтобы это означало, что у нас есть список, который проверяется, и некоторые, которые не проверяются, что приводит к неопределенной ситуации.
Кроме того, для установки всех флажков или снятия всех флажков мы также можем установить флажок заголовка таблицы.
Если в данный момент он находится в неопределенном состоянии, то после щелчка он перейдет в проверенное состояние.
и если он находится в проверенном состоянии, он перейдет в непроверенное состояние.
HTML
<table class="table table-hover> <thead> <tr> <th> <mat-checkbox [indeterminate]="chkBoxStatus==1" [checked]="chkBoxStatus==2" (change)="clrUnClrSel($event.checked)"></mat-checkbox> </th> <!-- this checkbox in the table header <th>Name</th> </tr> </thead> <tbody *ngFor="let user of users"> <td> <mat-checkbox [checked]="user.chk" (change)="chngChkBox($event, user)"></mat-checkbox> </td> <td>{{user.name}}</td> </tbody> </table>
Здесь мы будем использовать две функции: одну функцию при щелчке флажка, которая находится внутри тела таблицы, а другую, которую мы используем, находится в заголовке таблицы.
TS-файл
//variables declaration chkBoxStatus: number = 0;//0 means no, 1 means inderminate,2 means checked - using in the table header selItems: number = 0;//holding how many data is selected 1,2 ,3 so I can show the selected number or I can also calculate by interating the array whose value is checked chngChkBox(event: any, c: any) { c.chk = event.checked; let isSome = false, type = 0; let items = 0; for (let k = 0; k < this.users.length; k++) { if (this.users[k].chk) { items++; isSome = true; if (type != 1) type = 2 } else type = 1; } this.selItems = items; this.chkBoxStatus = type == 2 ? 2 : isSome ? 1 : 0; } clrUnClrSel(val: boolean) { for (let k = 0; k < this.users.length; k++) { this.users[k].chk = val; } if (val) { this.selItems = this.users.length; this.chkBoxStatus = 2; } else { this.selItems = 0; this.chkBoxStatus = 0; } }
Для отображения выбранных элементов нажмите кнопку очистки выбора, нам нужно добавить ее в HTML. Кроме того, убедитесь, что мы показываем эту строку только в том случае, если какой-либо флажок установлен для лучшего взаимодействия с пользователем, и всякий раз, когда пользователь снимает все флажки, эта строка будет удалена из dom.
Новый HTML, который нам нужно добавить для вышеуказанной функциональности
<div *ngIf="selItems>0"> {{selItems}} of {{cntnts.length}} items selected <div class="btn btn-primary btn-sm" (click)="clrUnClrSel(false)">Clear Selection</div> </div>
Для реакции также, простой js или любой другой интерфейсный фреймворк мы также можем использовать ту же концепцию.
Удачного кодирования с неопределенным флажком.💗