當選中/取消選中時，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啓用/禁用表格中的無線電輸入

回答

相關問題