Angular 6 + Bootstrap 4全选并取消全选复选框 [英] Angular 6 + Bootstrap 4 Select all and Deselect all Checkboxes
本文介绍了Angular 6 + Bootstrap 4全选并取消全选复选框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在尝试使Bootstrap 4 Checkboxs使用全选并取消选择6+中的all选项时遇到问题.当我在这里使用原始代码时,我可以使它工作:
http://www.angulartutorial.net/2017/04/select-all-deselect-all-checkbox.html
但是问题是,Bootstrap使用另一个事件来单击其复选框.有人对此有解决方案吗?
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>
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() {
}
}
这篇关于Angular 6 + Bootstrap 4全选并取消全选复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文