Filter by checkbox in angular 5

问题

I am able to implement the filter on input field with the pipe. But I am not able to do so with checkbox filter.

Below is my code for input filter.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform {

    transform(users: any, searchTerm: any): any {
        // check if search term is undefined
        if (searchTerm === undefined) {
            return users;
        }
        // return updated users array
        return users.filter(function(user) {
            return user.name.toLowerCase().includes(searchTerm.toLowerCase());
        });
    }
}

UserComponent.html

<input type="text" [(ngModel)]="searchTerm">

<table>
    <tr *ngFor="let user of users | filter: searchTerm">
        <td>{{user.name}}</td>
        <td>{{user.type}}</td>
    </tr>
</table>

Now for type I want to filter on checkbox select.

<tr>
    <td *ngFor="let role of roles">
        <label>{{role.type}}</label>
        <input type="checkbox">
    </td>
</tr>

In input field i can get the value using [(ngModel)] but in checkbox, I am not able to do so. Please let me know how could I achieve using checkbox select. Thank you

回答1:

Yes, you can use ngModel like this:

<input type="checkbox" name="admin" id="admin" [(ngModel)]='isAdmin'>
<input type="checkbox" name="student" id="student" [(ngModel)]='isStudent'>

And I have a blog post on filtering here: https://blogs.msmvps.com/deborahk/filtering-in-angular/

It shows how to filter with code instead of with a pipe so you can more easily filter on checkbox values.

回答2:

First of all, you shouldn't use checkboxes when it comes to state switching. Always use radio buttons in this case.

Put this code in your HTML-template

<label>
  <input type="radio" name="role-group" id="admin" value="admin" [checked]="searchTerm==='admin'" [(ngModel)]="searchTerm">Admin
</label>
<label>
  <input type="radio" name="role-group" id="student" value="student" [checked]="searchTerm==='student'" [(ngModel)]="searchTerm">Student
</label>
<label>
  <input type="radio" name="role-group" id="staff" value="staff" [checked]="searchTerm==='staff'" [(ngModel)]="searchTerm">Staff
</label>

And make sure that searchTerm is a member of your typescript file. e.g.:

private searchTerm: string = 'search';

That should work. If you now click one of those radio buttons searchTerm is set and Angular will filter using your pipe. Moreover, if you enter 'admin', 'student' or 'staff' manually, the corresponding radio button will get activated.

回答3:

Component code:

public roleList = {studentRole:false,adminRole:false,staffRole:false};

HTML code:

<tr>
    <td *ngFor="let user of userList | roleFilter:roleList">
        {{user.name}} - {{user.roleType}}
    </td>
</tr>

<label>Student</label>
<input [(ngModel)] = "roleList.studentRole" type="checkbox">

<label>Admin</label>
<input [(ngModel)] = "roleList.adminRole" type="checkbox">

<label>Staff</label>
<input [(ngModel)] = "roleList.staffRole" type="checkbox">

Pipe code:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'roleFilter'
})
export class RoleFilter implements PipeTransform {

    transform(userList: any,roleList:any): any {
        if(!roleList.studentRole && !roleList.adminRole && !roleList.staffRole){
            return userList;
        }

        return userList.filter(user => 
                                (roleList.studentRole && user.roleType == "student") 
                                || (roleList.adminRole && user.roleType == "admin")
                                || (roleList.staffRole && user.roleType == "staff"))
    }
}

来源：https://stackoverflow.com/questions/49287659/filter-by-checkbox-in-angular-5

标签

angular

pipe