Angular 6 + Bootstrap 4 全选并取消选择所有复选框 [英] Angular 6 + Bootstrap 4 Select all and Deselect all Checkboxes
问题描述
我在尝试让 Bootstrap 4 复选框使用全选和取消全选 angular 6+ 选项时遇到问题.当我在这里使用原始代码时，我可以让它工作:http://www.angulartutorial.net/2017/04/select-all-deselect-all-checkbox.html
但问题是 Bootstrap 使用不同的事件来单击其复选框.有没有人对此有解决方案?
<input class="form-check-input" type="checkbox" (change)="selectAll()"><label class="form-check-label">全选<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}}
和 TS:
import { Component, OnInit } from '@angular/core';@成分({选择器:'应用复选框'，templateUrl: './checkbox.component.html',styleUrls: ['./checkbox.component.scss']})导出类 CheckboxComponent 实现 OnInit {title = '复选框';名称:任何；selectedAll:任何；构造函数(){this.title = "全选/取消全选复选框 - Angular 2";this.names = [{ name: 'Prasobh', 选择: false },{名称:'亚伯拉罕'，选择:假}，{ name: 'Anil', 选择: false },{名称:'山姆'，选择:假}，{名称:'娜塔莎'，选择:假}，{名称:'结婚'，选择:假}，{ name: 'Zian', selected: false },{ name: 'karan', 选择: false },]}全选() {for (var i = 0; i < this.names.length; i++) {this.names[i].selected = this.selectedAll;}}checkIfAllSelected() {this.selectedAll = this.names.every(function(item:any) {返回 item.selected == true;})}ngOnInit() {}}应该这样做
这是一个 plnkr:https://next.plnkr.co/edit/ypGmwE32Xn1bgbqd?preview
HTML:
<input class="form-check-input" type="checkbox" (change)="selectAll()" [checked]="selectedAll"><label class="form-check-label">全选<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}}
TS:
import { Component, OnInit } from '@angular/core';@成分({选择器:'应用复选框'，templateUrl: './checkbox.component.html',styleUrls: ['./checkbox.component.scss']})导出类 CheckboxComponent 实现 OnInit {title = '复选框';名称:任何；selectedAll:任何；selectedNames: 任何;构造函数(){this.title = "全选/取消全选复选框 - Angular 2";this.names = [{ name: 'Prasobh', 选择: false },{名称:'亚伯拉罕'，选择:假}，{ name: 'Anil', 选择: false },{名称:'山姆'，选择:假}，{名称:'娜塔莎'，选择:假}，{名称:'结婚'，选择:假}，{ name: 'Zian', 选择: false },{ name: 'karan', 选择: false },]}全选() {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;返回真；}ngOnInit() {}}I'm having an issue trying to get Bootstrap 4 Checkboxes working with a select all and deselect all option in angular 6+. I can get it to work when I use the original code here:
http://www.angulartutorial.net/2017/04/select-all-deselect-all-checkbox.html
But the issue is Bootstrap uses a different event to click their checkboxes. Does anyone have a solution for this?
<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>
And the 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() {
}
}
this should do it
Here is a 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() {
}
}
这篇关于Angular 6 + Bootstrap 4 全选并取消选择所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
