samedi 16 septembre 2017

Checkbox filter with pipe in angular4

I am trying to create a pipe with the checkbox for filtering the list in json data. I have created a pipe with checkbox pipe. I am not able to get my filter work in pipe. Please help. When I am clicking one checkbox, it is clicking all checkboxes, maybe it is because of *ngFor for lists, can you help me tackle that also. Here is my code -

Checkbox -

<div class="form-check" *ngFor="let c of cities">
    <input class="form-check-input" type="checkbox" name="checked"
     [(ngModel)]="checked"> 
</div>

Data For Checkbox Field -

cities:any = [
  {
    id: "1",
    name: "Bangalore",
    selected: true
  },
  {
    id: "2",
    name: "Gurgoan",
    selected: true
  }
]

Pipe of checkbox -

import { Pipe, PipeTransform } from '@angular/core';
import { JobsService } from '../services/jobs.service';

@Pipe({
  name: 'checkcity'
})
export class CheckcityPipe implements PipeTransform {

  transform(check: any, checked?: any): any {
    console.log('checked',checked);
    return checked
            ? check.filter(city => city.name === checked) 
            : check;
    }

}

Job List Data -

<ul>
    <li *ngFor="let joblists of jobList | checkcity: checked">
       
    </li>
</ul>




Aucun commentaire:

Enregistrer un commentaire