Как да активирате радио бутона за долния случай в angular

Използвам таблицата по-долу... Искам да активирам бутона за избор (вдясно) въз основа на отметка в квадратчето (вляво). Когато премахнем отметката от квадратчето, искаме да деактивираме btn радиото.

         <table class="table">
              <thead>
                <tr>
                  <th>Select</th>
                  <th>
                    Group Name
                  </th>
                  <th>Profile</th>
                </tr>
              </thead>
              <tbody id="tabl">
                <tr *ngFor="let data of col; let i = index">
                  <td>
                    <input class="pull-left" type="checkbox" name="checkbox" value="{{data.id}}"
                      (change)="dataCheck($event,data)" />
                  </td>
                  <td> {{data.name}}</td>
                  <td>
                    <input type="radio" value="profile" name="profile" 
                       (click)="applyProfile(data.id,data.name)">
                  </td>
                </tr>

              </tbody>
            </table>

За поставяне на отметка в квадратчето,

  dataCheck(event, data) {
      if (event.target.checked) {
         this.selectedGroups.push(data.id);
          console.log("selectedGroups push", this.selectedGroups);
      } else {
         this.selectedGroups = this.selectedGroups.filter(item => {
         item !== data.id;
      });

     }
   }

Може ли някой да ми помогне?


typescript angular7 angular6
person Angel Reji    schedule 09.06.2020    source източник
comment
може ли някой да помогне??   -  person Angel Reji    schedule 09.06.2020

Отговори (1)


arrow_upward
1
arrow_downward

Ето е стекблиц на работния код. Опростих го малко и оставих внедрявания за 2 функции, дефинирани в HTML, тъй като те не бяха необходими за отговора.

<tbody id="tabl">

    <tr *ngFor="let data of col; let i = index">
      <td>
        <input #checkboxInput class="pull-left" type="checkbox" name="checkbox" value="{{data.id}}"
          (change)="dataCheck($event,data)" />
      </td>
      <td> {{data.name}}</td>
      <td>
        <input type="radio" [disabled] = '!checkboxInput.checked' value="profile" name="profile" 
            (click)="applyProfile(data.id,data.name)">
      </td>
    </tr>

</tbody>

Идеята е да се използва препратка към шаблона в квадратчето за отметка, тъй като това е елементът, който искаме да видим дали е маркиран или не. #checkboxInput излага квадратчето за отметка като HTMLInputElement, което можем да използваме като променлива в останалата част от HTML. Можете да прочетете повече за това какви свойства са изложени на HTMLInputElement тук .

Само квадратчетата за отметка и радио бутоните имат свойството checked. И така, на бутона за избор задаваме [disabled] = !checkboxInput.checked като атрибут. Това казва "Ако квадратчето за отметка не е отметнато, тогава радиобутонът е деактивиран. Ако квадратчето е отметнато, тогава радиобутонът не е деактивиран".

Дано това помогне.

person Qarun Qadir Bissoondial    schedule 15.06.2020