当选中/取消选中时，Angular2启用/禁用表格中的无线电输入

我已经创建了一个表格，其中使用单选按钮设置了前3行的优先级。目标是在选中/取消选中时启用/禁用兄弟单选按钮。我可以通过在每一行上提供相同的名称来垂直地检查/取消选中按钮，但是我无法水平地对其兄弟进行操作。当选中/取消选中时，Angular2启用/禁用表格中的无线电输入

我试过对input元素使用（[attr.disabled] =“boolean”），但是禁用了表中的所有按钮。我也试着用javascript做，但它使得代码很长，但仍然不完美。

如果有人可以帮助！

以下是我的代码。

HTML

<tr *ngFor="let news of newss"> 
<td>{{ news.newstitle }}</td> 
<td>{{ news.newsdescription }}</td> 
<td>{{ news.display }}</td> 
<td>{{ news.status }}</td> 
<td><span> {{ news.photo }}</span></td> 
<td> 
    <div class="radio"> 
    <label><input type="radio" name="priority1" #priority1 
    (change)="handleChange($event, news, priority1)" 
    [attr.disabled]="disprior1" /></label> 
    </div> 
    <div class="radio"> 
    <label><input type="radio" name="priority2" #priority2 
    (change)="handleChange($event, news, priority2)" 
    [attr.disabled]="disprior2" /></label> 
    </div> 
    <div class="radio"> 
    <label><input type="radio" name="priority3" #priority3 
    (change)="handleChange($event, news, priority3)" 
    [attr.disabled]="disprior3" /></label> 
    </div>   
</td> 
</tr>

TS：

handleChange(evt, news, priority) { 
     let target = evt.target; 
     if (target.checked) { 
     if (priority.name == "priority1") { 
      this.disprior2 = true; 
      this.disprior3 = true; 
     } else if (priority.name == "priority2") { 
      this.disprior1 = true; 
      this.disprior3 = true; 
     } else if (priority.name == "priority3") { 
      this.disprior1 = true; 
      this.disprior2 = true; 
     } 
     } 
    }

来源

2017-08-08 Jamshed

新闻对象中是否有任何独特的值，即ID？ –

我不确定我是否理解你想做什么，首先你使用单选按钮而不是复选框，并且你正在讨论取消选中并检查它们。你也想在单击一行时禁用所有其他行，或者你想要什么？ :) – Alex

<tr *ngFor="let news of newss; let i = index"> 
<td>{{ news.newstitle }}</td> 
<td>{{ news.newsdescription }}</td> 
<td>{{ news.display }}</td> 
<td>{{ news.status }}</td> 
<td><span> {{ news.photo }}</span></td> 
<td> 
    <div class="radio"> 
    <label> 
     <input type="radio" [name]="'priority' + i" (change)="handleChange($event, news)"/> 
    </label> 
    </div> 
    <div class="radio"> 
    <label> 
     <input type="radio" [name]="'priority' + i" (change)="handleChange($event, news)"/> 
    </label> 
    </div> 
    <div class="radio"> 
    <label> 
     <input type="radio" [name]="'priority' + i" (change)="handleChange($event, news)"/> 
    </label> 
    </div>   
</td> 
</tr>

，你可以简单地声明该指数* ngFor，并用它来设置[名]属性为每组单选按钮。

来源

2017-08-08 07:43:32

这将使该组成一排。我们需要让选中的按钮禁用行和列。 – Jamshed

我可以建议使用下列库：

PrimeNG

非常易于使用，功能非常强大。我使用复选框以下列方式：

<p-checkbox *ngFor="let part of partsLoaded; let i = index" 
         name="group1" 
         label="{{ part }}" 
         value="{{ part }}" 
         [(ngModel)]="selectedParts" 
         (click)="showOrHidePart()" 
         (mouseover)="selectMesh(part, i)" 
         (mouseout)="deSelectMesh(part, i)" 
         [class.active]="i == selectedMeshIndex" 
         [class.no-mesh]="getStyle(part)" 
         [disabled]="getStatus(part)">{{ part }} 
      </p-checkbox>

，你可以看到我根据功能的getStatus（）的返回值禁用复选框：

getStatus(part) { 
     let selectedMesh = this.meshCollection.find(obj => obj.name === part).object; 

     if (selectedMesh) { 
      return false; 
     } else { 
      return true; 
     } 
    }

你可以做类似的东西你的收音机。您还可以利用名称属性来实现您的目标。 Dino

来源

2017-08-08 07:47:22 Dino

当选中/取消选中时，Angular2启用/禁用表格中的无线电输入

回答

相关问题