如何在 angular 2 中禁用多个文本框
How to disable multiple textboxes in angular 2
我有 'n' 行,其中有文本框和 select 框。当我使用 angular 更改同一行中 select 框的值时,我试图禁用文本框 2.
我的代码如下:
<table>
<tr>
<td><input type="text" (disabled)="isDisabled(data.rowIndex)"</td>
<td> <select (onValueChanged)="test(data.rowIndex)">
<option>Yes</option>
<option>No</option>
</td>
</tr>
<tr>
<td><input type="text" (disabled)="isDisabled(data.rowIndex)"</td>
<td> <select (onValueChanged)="test(data.rowIndex)">
<option>Yes</option>
<option>No</option>
</td>
</tr>
.
.
.
</table>
component.ts
tabNumber: number = -1;
test(valueID){
this.tabNumber = valueID;
}
isDisabled(num){
return this.tabNumber === num;
}
上面这一行仅禁用了我最近 select编辑的一个文本框,并启用了其他文本框。因此,我的代码一次只能 enable/disable 一个文本框。但我想根据我的 selection 禁用多个框。有人可以帮忙吗?
查看它的实际应用:plunker
html :
<table>
<tr *ngFor="let item of items; let i = index">
<td><input type="text" [disabled]="isDisabled(i)"/></td>
<td> <select (change)="toggle($event,i)">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</td>
</tr>
</table>
组件:
export class AppComponent {
items = [{value : "hi"},{value : "hi"},{value : "hi"},{value : "hi"}]
rows: number[] = [];
isDisabled(index) {
return this.rows[index] === -1;
}
enable(index){
this.rows[index] = 1;
}
toggle($event,index){
let selectElement = $event.target;
let value = selectElement.options[selectElement.selectedIndex].value;
if(value === "yes"){
this.enable(index);
}else{
this.disable(index);
}
}
disable(index){
this.rows[index] = -1;
}
}
我有 'n' 行,其中有文本框和 select 框。当我使用 angular 更改同一行中 select 框的值时,我试图禁用文本框 2.
我的代码如下:
<table>
<tr>
<td><input type="text" (disabled)="isDisabled(data.rowIndex)"</td>
<td> <select (onValueChanged)="test(data.rowIndex)">
<option>Yes</option>
<option>No</option>
</td>
</tr>
<tr>
<td><input type="text" (disabled)="isDisabled(data.rowIndex)"</td>
<td> <select (onValueChanged)="test(data.rowIndex)">
<option>Yes</option>
<option>No</option>
</td>
</tr>
.
.
.
</table>
component.ts
tabNumber: number = -1;
test(valueID){
this.tabNumber = valueID;
}
isDisabled(num){
return this.tabNumber === num;
}
上面这一行仅禁用了我最近 select编辑的一个文本框,并启用了其他文本框。因此,我的代码一次只能 enable/disable 一个文本框。但我想根据我的 selection 禁用多个框。有人可以帮忙吗?
查看它的实际应用:plunker
html :
<table>
<tr *ngFor="let item of items; let i = index">
<td><input type="text" [disabled]="isDisabled(i)"/></td>
<td> <select (change)="toggle($event,i)">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</td>
</tr>
</table>
组件:
export class AppComponent {
items = [{value : "hi"},{value : "hi"},{value : "hi"},{value : "hi"}]
rows: number[] = [];
isDisabled(index) {
return this.rows[index] === -1;
}
enable(index){
this.rows[index] = 1;
}
toggle($event,index){
let selectElement = $event.target;
let value = selectElement.options[selectElement.selectedIndex].value;
if(value === "yes"){
this.enable(index);
}else{
this.disable(index);
}
}
disable(index){
this.rows[index] = -1;
}
}