[英]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.