Снимите флажок Угловой 7 Bootstrap 4 - PullRequest
Новая
       23

Снимите флажок Угловой 7 Bootstrap 4

0 голосов
/ 20 февраля 2019

Я использую Angular 7 и Bootstrap 4. Я пытаюсь настроить переключатели, которые можно переключать, но их можно отключить, если щелкнуть дважды.Как показано в этом ответе .Вот моя текущая реализация .

В моем примере вы можете видеть, что я могу дважды нажать кнопку, но у меня возникла новая проблема.Я хотел бы иметь реализацию, которая изолирует строки.В том смысле, что если вы отвечаете на вопросник, вы можете выбрать другой ответ в каждой строке или оставить ее пустой.

Мой вопрос: как я могу выбрать другой ответ (кнопку) в каждой строке или оставить строку пустой?Как я могу однозначно определить строку в своем коде?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 05 марта 2019

Наконец-то я нашел рабочее решение моей проблемы.Вот оно: Как снять отметку с переключателя при его втором нажатии Angular 2 + .

Это простое и масштабируемое решение, которое хорошо работает.

0 голосов
/ 20 февраля 2019

обновление: немного жестко запрограммировано, но хорошее начало: .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>

// извините, я не знаю, как сохранитьизменения на стеке: (

...