При нажатии на флажок, как установить все предыдущие флажки, как отмечено в угловых 4 - PullRequest
Новая
       14

При нажатии на флажок, как установить все предыдущие флажки, как отмечено в угловых 4

0 голосов
/ 16 мая 2018

У меня есть несколько флажков с пометкой (Начальный, Средний, Продвинутый, Эксперт и т. Д.)

Теперь я хочу нажать на любой флажок, все предыдущие флажки должны быть отмечены.

Пример: если я нажму на Дополнительно, должны быть отмечены только все предыдущие флажки, кроме эксперта.

Ниже приведен код для получения списка флажков. Пожалуйста, дайте мне знать, если есть какое-либо решение. 

<div class="cb-cont" *ngFor = "let circle of [1,2,3,4], let i = index;"   >
    <input type="checkbox" class="cb" [attr.id]="'vacancy' + i" (change)="changeCheckbox(i)" [checked]=" (i==0) ? true : false"  >
        <label [attr.for]="'vacancy' + i" ><i class="xico-completed"></i></label>
</div>


changeCheckbox(i) {
    var elem = <HTMLInputElement>event.target
    elem.checked = true;
}

enter image description here

Ответы [ 3 ]

0 голосов
/ 16 мая 2018

КОМПОНЕНТ 

private checked: number = 0;

changeCheckbox(index, e) {
    if (index === 0) {
        e.target.checked = true;
        this.checked = 0;
        return;
    }

    if (e.target.checked) {
        if ((this.checked+1) === index) {
            this.checked = index;
        }else {
            e.target.checked = false;
        }
    } else {
        e.target.checked = true;
        this.checked = index;
    }
}

getChecked(i) {
    return (i <= this.checked);
}

HTML 

 <div class="cb-cont" *ngFor = "let circle of [1,2,3,4], let i = index;"   >
        <input type="checkbox" class="cb" [attr.id]="'vacancy' + i" (change)="changeCheckbox(i, $event)" [checked]="getChecked(i)"  >
            <label [attr.for]="'vacancy' + i" ><i class="xico-completed"></i></label>
    </div>
0 голосов
/ 17 мая 2018

Обновлен ответ Гобли

компонент 

selectedCheckbox = 0;
k = 0;

public changeCheckbox(i) {
 debugger;
 this.selectedCheckbox = i;
 var elem = <HTMLInputElement>event.target;
 if(elem.checked){
   this.k=1;
   elem.checked = true;  
 }else{
   this.k=0;
   elem.checked = false; 
 }
}

Html 

<div class="cb-cont" *ngFor = "let circle of [1,2,3,4], let i = index;"   >
  <input type="checkbox" class="cb" [attr.id]="'vacancy' + i" 
 (change)="changeCheckbox(i)" [checked]="(k==1) ?( (i<=selectedCheckbox) ? true : false ) :( (i>=selectedCheckbox) ? false : true ) "  >
    <label [attr.for]="'vacancy' + i" ><i class="xico-completed"></i>

надеюсь, это поможет вам. https://angular -2hh27h.stackblitz.io /

0 голосов
/ 16 мая 2018

Вы можете сохранить индекс выбранного флажка и выбрать все предыдущие.Вот так: 

<div class="cb-cont" *ngFor = "let circle of [1,2,3,4], let i = index;"   >
    <input type="checkbox" class="cb" [attr.id]="'vacancy' + i" (change)="changeCheckbox(i)" [checked]=" (i<=selectedCheckbox) ? true : false"  >
        <label [attr.for]="'vacancy' + i" ><i class="xico-completed"></i></label>
</div>

А в контроллере: 

  selectedCheckbox = 0;
  public changeCheckbox(i) {
    this.selectedCheckbox = i;
    var elem = <HTMLInputElement>event.target;
    elem.checked = true;  
  }

Здесь у вас есть рабочий стекблиц с кодом: https://stackblitz.com/edit/angular-a29qko

...