[英]uncheck a checkbox which is checked and freezed with a condition in Angular 5
我有一个在 JSON 值上迭代的表,我在第一列中有复选框
要求:选择5个复选框时,用户不应能够select The 6th Checkbox,但他可以在5个复选框中取消任何选举
当前场景:当用户选择 5 个复选框时,我可以冻结复选框,但不允许我取消选中选定的复选框
<checkbox [forbidden]="isFull() && !Selected" [ngModel]="Selected" (ngModelChange)="Change(Result, $event)"></checkbox>
复选框是我的代码库中的自定义组件
isFull() {
return someService.Slots()===0; // availableSlots returns 5
}
Change(Result, $event){
// some code irrelevant to the checkbox logic
// Result holds the JSON value for iterating row
}
请提供工作的 plunker 或任何在线编辑器以便更好地理解
提前致谢
希望这对你有帮助,。 您可以根据需要对其进行优化和修改。
工作样品
模板文件:
template: `
<ul>
<ng-container>
<li *ngFor="let item of list">
<input
type="checkbox"
value="{{item.value}}"
[disabled]="item.disabled"
(change)="onCheckboxChange($event, item)"
/>
{{item.label}}<br>
</li>
</ng-container>
</ul>
<pre> {{checkedList | json}} </pre>
`
Class 文件
export class App {
name: string;
checkedList: any = [];
list: any = [
{'label': 'A', 'value': 'a', 'disabled': false},
{'label': 'B', 'value': 'b', 'disabled': false},
{'label': 'C', 'value': 'c', 'disabled': false},
{'label': 'D', 'value': 'd', 'disabled': false},
{'label': 'E', 'value': 'e', 'disabled': false},
{'label': 'F', 'value': 'f', 'disabled': false},
{'label': 'G', 'value': 'g', 'disabled': false}
];
constructor() {
}
onCheckboxChange(e, item) {
if(e.target.checked) {
this.checkedList.push(item);
} else {
let index = this.checkedList.findIndex(obj => item.value === obj.value);
if(index > -1) {
this.checkedList.splice(index,1);
}
}
if(this.checkedList.length > 4) { // *change available slots*
let unCheckedList = this.list.filter((obj) => {
let isCheck = this.checkedList.find((item) => {
return item.value === obj.value
});
obj.disabled = !isCheck ? true : false;
return !isCheck;
});
} else {
this.list.map((obj)=>{
obj.disabled = false;
});
}
}
}
不应该是“isFull() &&?Selected”,因为你想冻结未选中的。 但仍然可以取消选择选定的。
尝试这个:
import { Component } from "@angular/core";
import { list } from './list';
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
list: Array<any>;
checked = [];
shouldCheckboxesBeDisabled = false;
ngOnInit() {
this.list = list;
this.recheckDisablingStatus();
}
recheckDisablingStatus() {
this.shouldCheckboxesBeDisabled = this.list.filter(item => item.checked).length >= 5;
}
uncheckIfAlreadyChecked(itemIndex) {
const isChecked = this.list[itemIndex].checked;
this.list[itemIndex].checked = isChecked ? false : isChecked;
this.recheckDisablingStatus();
}
}
在模板中:
<table border="1">
<thead>
<td>ID</td>
<td>Name</td>
<td>Checked</td>
<td>Uncheck if Already Checked</td>
</thead>
<tbody>
<tr *ngFor="let item of list; let i = index">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>
<input
[disabled]="shouldCheckboxesBeDisabled && !list[i].checked"
type="checkbox"
[(ngModel)]="list[i].checked"
(change)="recheckDisablingStatus()">
</td>
<td><button (click)="uncheckIfAlreadyChecked(i)">Uncheck If Checked</button></td>
</tr>
</tbody>
</table>
这是您参考的工作示例 StackBlitz 。
试试这个:
<table border="1">
<thead>
<td>ID</td>
<td>Name</td>
<td>Checked</td>
</thead>
<tbody>
<tr *ngFor="let item of list$ | async; let i = index">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>
<input
[disabled]="shouldCheckboxesBeDisabled && checked.indexOf(item.id) < 0"
type="checkbox"
(change)="onCheckBoxChange(item.id, $event.target.checked)">
</td>
</tr>
</tbody>
</table>
在您的组件中:
import { Component } from "@angular/core";
import { Observable, of } from "rxjs";
import { HttpClient } from "@angular/common/http";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
list$: Observable<Array<any>>;
checked = [];
shouldCheckboxesBeDisabled = false;
constructor(private http: HttpClient) {}
ngOnInit() {
// this.list$ = this.http.get<Array<any>>('/assets/data.json');
this.list$ = of([
{
id: 1,
name: "Name 1",
checked: false
},
{
id: 2,
name: "Name 2",
checked: true
},
{
id: 3,
name: "Name 3",
checked: false
},
{
id: 4,
name: "Name 4",
checked: true
},
{
id: 5,
name: "Name 5",
checked: false
},
{
id: 6,
name: "Name 6",
checked: true
},
{
id: 7,
name: "Name 7",
checked: false
},
{
id: 8,
name: "Name 8",
checked: true
},
{
id: 9,
name: "Name 9",
checked: false
},
{
id: 10,
name: "Name 10",
checked: true
}
]);
}
onCheckBoxChange(itemId, checked) {
if(checked) {
this.checked.push(itemId);
} else {
const itemIndexToRemove = this.checked.indexOf(itemId);
this.checked.splice(itemIndexToRemove, 1);
}
this.shouldCheckboxesBeDisabled = this.checked.length >= 5;
}
}
这是您参考的工作示例 StackBlitz 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.