[英]Angular 6 + Bootstrap 4 Select all and Deselect all Checkboxes
我有一個問題,試圖讓Bootstrap 4 Checkbox使用select all並取消選擇angular 6+中的所有選項。 我在這里使用原始代碼時可以使用它: http : //www.angulartutorial.net/2017/04/select-all-deselect-all-checkbox.html
但問題是Bootstrap使用不同的事件來單擊它們的復選框。 有人有解決方案嗎?
<div class="form-check">
<input class="form-check-input" type="checkbox" (change)="selectAll()">
<label class="form-check-label">
Select All
</label>
</div>
<div class="form-check" *ngFor="let n of names">
<input class="form-check-input" type="checkbox" value="{{n.name}}" [(ngModel)]="selectedNames" (change)="checkIfAllSelected()">
<label class="form-check-label">
{{n.name}}
</label>
</div>
和TS:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-checkbox',
templateUrl: './checkbox.component.html',
styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent implements OnInit {
title = 'Checkbox';
names: any;
selectedAll: any;
constructor() {
this.title = "Select all/Deselect all checkbox - Angular 2";
this.names = [
{ name: 'Prashobh', selected: false },
{ name: 'Abraham', selected: false },
{ name: 'Anil', selected: false },
{ name: 'Sam', selected: false },
{ name: 'Natasha', selected: false },
{ name: 'Marry', selected: false },
{ name: 'Zian', selected: false },
{ name: 'karan', selected: false },
]
}
selectAll() {
for (var i = 0; i < this.names.length; i++) {
this.names[i].selected = this.selectedAll;
}
}
checkIfAllSelected() {
this.selectedAll = this.names.every(function(item:any) {
return item.selected == true;
})
}
ngOnInit() {
}
}
這應該做到這一點
這是一個plnkr: https ://next.plnkr.co/edit/ypGmwE32Xn1bgbqd ? preview
HTML:
<div class="form-check">
<input class="form-check-input" type="checkbox" (change)="selectAll()" [checked]="selectedAll">
<label class="form-check-label">
Select All
</label>
</div>
<div class="form-check" *ngFor="let n of names">
<input class="form-check-input" type="checkbox" value="{{n.name}}" [(ngModel)]="n.selected" (change)="checkIfAllSelected()">
<label class="form-check-label">
{{n.name}}
</label>
</div>
TS:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-checkbox',
templateUrl: './checkbox.component.html',
styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent implements OnInit {
title = 'Checkbox';
names: any;
selectedAll: any;
selectedNames: any;
constructor() {
this.title = "Select all/Deselect all checkbox - Angular 2";
this.names = [
{ name: 'Prashobh', selected: false },
{ name: 'Abraham', selected: false },
{ name: 'Anil', selected: false },
{ name: 'Sam', selected: false },
{ name: 'Natasha', selected: false },
{ name: 'Marry', selected: false },
{ name: 'Zian', selected: false },
{ name: 'karan', selected: false },
]
}
selectAll() {
this.selectedAll = !this.selectedAll;
for (var i = 0; i < this.names.length; i++) {
this.names[i].selected = this.selectedAll;
}
}
checkIfAllSelected() {
var totalSelected = 0;
for (var i = 0; i < this.names.length; i++) {
if(this.names[i].selected) totalSelected++;
}
this.selectedAll = totalSelected === this.names.length;
return true;
}
ngOnInit() {
}
}
我不確定bootstrap在復選框中是否有任何特殊的事件綁定邏輯。 我想你的代碼中缺少這個。 有關綁定,請參閱以下代碼段:
<form [formGroup]="form">
<div class="form-check" formArrayName="unitArr">
<input class="form-check-input" type="checkbox" [checked]="checkAllSelected()"
(click)="selectAll($event.target.checked)" id="select-all">
<label class="form-check-label" for="select-all">
Select All
</label>
</div>
<div class="form-check" *ngFor="let n of names; let i = index;" >
<input class="form-check-input" type="checkbox" value="{{n.name}}" [(ngModel)]="selectedNames" (change)="checkIfAllSelected()" [attr.id]="'check' + i">
<label class="form-check-label" [attr.for]="'check' + i">
{{n.name}}
</label>
</div>
</form>
checkAllSelected() {
return this.form.controls.unitArr.controls.every(x => x.value == true)
}
selectAll(isChecked) {
if isChecked
this.form.controls.unitArr.controls.map(x => x.patchValue(true))
else
this.form.controls.unitArr.controls.map(x => x.patchValue(false))
}
輸入的“id”必須用“for”映射到“label”。 不確定您是否有任何特殊要求,但這是非常基本的HTML概念。 請試一試,看看你的問題是否解決了。
編輯:請注意,我不熟悉Angular6概念,但上面的代碼確實適用於Angular 2.您可以檢查以上任何一點是否對您有所幫助。 祝一切順利!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.