Używam kątowego 7 i bootstrap 4. Próbuję mieć przyciski radiowe, które przełączają, ale mogą być niezaznaczone po dwukrotnym kliknięciu. Podobnie jak pokazano W tej odpowiedzi. Oto Mój prąd Wdrożenie.

W moim przykładzie można zobaczyć, że mogę nie dołączyć przycisku na kliknięcie dwukrotnie, ale mam nowy problem. Chciałbym mieć implementację, która izoluje wiersze. W tym sensie, że jeśli odpowiadasz na kwestionariusz, możesz wybrać inną odpowiedź w każdym wierszu lub pozostaw puste wiersz.

Moje pytanie brzmi: Jak mogę wybrać inną odpowiedź (przycisk) w każdym wierszu lub pozostaw w pustym rzędzie? Jak mogę jednoznacznie zidentyfikować wiersz w moim kodzie?

Dziękuję Ci.

0
YulePale 20 luty 2019, 17:34

2 odpowiedzi

Najlepsza odpowiedź

Wreszcie znalazłem rozwiązanie robocze do mojego problemu. To jest: Jak usunąć Przycisk radiowy na drugim kliknięciu Click 2+.

Jest to proste i skalowalne rozwiązanie, które działa dobrze.

0
YulePale 5 marzec 2019, 17:34

AKTUALIZACJA: To nieco trudne zakodowane, ale jego dobry start: .ts:

  status: boolean = false;
  option=""
  option1=[false, false, false]
  option2=[false, false, false]
  option3=[false, false, false]

  constructor(private renderer: Renderer2){}


  data = [{
    id:"1a",
    One:"Yes-1a",
    Two:"Maybe-1b",
    Three:"No-1c"
  },{
    id:"2a",
    One:"Yes-2a",
    Two:"Maybe-2b",
    Three:"No-2c"
  },
  {
    id:"3a",
    One:"Yes-3a",
    Two:"Maybe-3b",
    Three:"No-3c"
  }
  ]

  clickEvent1(i){
    this.option = 'option1 : ' + this.option1
    if(this.option1[i] == true){
      this.option1[i] = false
    }else{
      this.option1[i] = true
    }  
    this.option2[i] = false; this.option3[i] = false


}
  clickEvent2(i){

    this.option = 'option2 : ' + this.option2
    if(this.option2[i] == true){
        this.option2[i] = false
     } else{
        this.option2[i] =true
     }
      this.option1[i] = false; this.option3[i] = false
}
  clickEvent3(i){

    this.option = 'option3 : ' + this.option3
    if(this.option3[i] == true){
      this.option3[i] = false
    }else{
      this.option3[i] = true
    }
      this.option1[i] = false; this.option2[i] = false} 
}

.html:

<div class="card" style="height:400px">
  <div class="card-body no-gutters">

    <div *ngFor="let radio of data" class="btn-group-toggle" data-toggle="buttons">
      <div class="row">
        <label class="btn btn-secondary col-4" 
        [ngClass]="option1 ? 'bbb' : ''">
          <input (click)="clickEvent1()" 
          type="radio" name="options" id="option1">
          {{radio.One}}
        </label>
        <label class="btn btn-secondary col-4"
        [ngClass]="option2 ? 'bbb' : ''">
          <input (click)="clickEvent2()"
          type="radio" name="options" id="option2" autocomplete="off"> {{radio.Two}}
        </label>
        <label class="btn btn-secondary col-4"
        [ngClass]="option3 ? 'bbb' : ''">
          <input (click)="clickEvent3()"
          type="radio" name="options" id="option3" autocomplete="off"> {{radio.Three}}
        </label>
        {{option}}
      </div>
    </div>


  </div>
</div>

// Przepraszam, nie wiem, jak zapisać zmiany na Stackblitz :(

0
GaryB 21 luty 2019, 10:36