mardi 6 août 2019

Angular 8 how to make checkbox checked if i check 2~4

I use ngFor to make a checkbox list, and i need to check in some ranges. For example: total 5 checkboxes, I check first checkbox is 3, than I check second checkbox is 1, then checkbox from 1~3 should be checked; or I check second checkbox is 5, then checkbox from 3~5 should be checked.

<div class="checkbox checkbox-1" *ngFor="let n of priceitems">

   <input type="checkbox" id="" name="priceitemss" value="" [(ngModel)]="n.selected" #priceitemss="ngModel" [checked]="n.selected" (change)="checkIfAllSelected($event)">                                
   <label for=""></label>

</div>


isCheck: boolean = false;
priceitems = [
    {id:1, value:'$', selected:false},
    {id:2, value:'$$', selected:false},
    {id:3, value:'$$$', selected:false},
    {id:4, value:'$$$$', selected:false},
    {id:5, value:'$$$$$', selected:false}
];

checkIfAllSelected(event) {
    if (event.target.name == 'priceitemss') {
    this.isCheck = true;

    var i = event.target.id -1;
    var priceitemselect = this.priceitems.filter(item => item.selected).map(item => item.id);

    console.log(priceitemselect);


    }
}





Aucun commentaire:

Enregistrer un commentaire