javascript - Filter by pillsbuttons instead of using a select - angular - Stack Overflow

admin管理员组

文章数量:1300069

I'm building with Angular and have used a filter pipe to filter on the selected option from my dropdown on the *ngFor loop. The content then filters accordingly. I want to swap the select options to buttons or pills. So when a button is clicked the filter takes place - the button will act as a on/off switch so you can have more than one option filtered.

Here is my stackblitz example -

    <div class="form-group row">
      <div class="col-sm">
        <select class="form-control" name="locationFilter" id="locationFilter" [(ngModel)]="filteredLocation">
          <option value="All">All</option>
          <option *ngFor="let entry of timeLine | filterUnique" value="{{entry.location}}">{{entry.location}}
          </option>
        </select>
      </div>
//Button filters below
       <div ngDefaultControl [(ngModel)]="filteredLocation" name="locationFilter" id="locationFilter">
            <button class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique">{{entry.location}}</button>
       </div>
    </div>

I'm not sure how to get the buttons to work the same way as no filtering takes place.... any help appreciated!?

I'm building with Angular and have used a filter pipe to filter on the selected option from my dropdown on the *ngFor loop. The content then filters accordingly. I want to swap the select options to buttons or pills. So when a button is clicked the filter takes place - the button will act as a on/off switch so you can have more than one option filtered.

Here is my stackblitz example - https://stackblitz./edit/timeline-angular-7-tyle1f

    <div class="form-group row">
      <div class="col-sm">
        <select class="form-control" name="locationFilter" id="locationFilter" [(ngModel)]="filteredLocation">
          <option value="All">All</option>
          <option *ngFor="let entry of timeLine | filterUnique" value="{{entry.location}}">{{entry.location}}
          </option>
        </select>
      </div>
//Button filters below
       <div ngDefaultControl [(ngModel)]="filteredLocation" name="locationFilter" id="locationFilter">
            <button class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique">{{entry.location}}</button>
       </div>
    </div>

I'm not sure how to get the buttons to work the same way as no filtering takes place.... any help appreciated!?

• javascript
• angular
• typescript
• filter
• pipe

Share Improve this question Follow asked Sep 26, 2019 at 8:33 Tom RudgeTom Rudge 3,27299 gold badges5555 silver badges103103 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Bind a click event (click)="filteredLocation = entry.location" to the button

Try like this:

 <div ngDefaultControl [(ngModel)]="filteredLocation" name="locationFilter" id="locationFilter">
     <button  (click)="filteredLocation = entry.location" class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique">{{entry.location}}</button>
  </div>

Working Demo

The crux of this is just assign the value of the button/switch to your filteredLocation variable like below

<button (click)="filteredLocation = entry.location" class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique">{{entry.location}}</button>

Updated Demo

Hope this helps :)

Easier to just have a click handler:

<div>
  <button class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique" (click)="filter(entry)">{{entry.location}}</button>
</div>

filter(entry) {
  this.filteredLocation = entry.location;
}

Demo: https://stackblitz./edit/timeline-angular-7-z2e6zh?file=src/app/timeline/timeline.ponent.ts

If you want to filter on multiple options your filter pipe will have to be adjusted to acadate an array of strings to filter on.

So in your FilterPipe the transform function gets changed as follows:

transform(value: string[], filterStrings: string[], propName: string): any {
    if (value.length === 0 || !filterStrings || filterStrings.length === 0) {
      return undefined;
    }

    const resultArray = [];
    for (const item of value) {
      if (filterStrings.indexOf(item[propName]) >= 0) {
        resultArray.push(item)
      }
    }

    return resultArray;
}

After that you need to add some code to the timeline.ponent.ts file:

An array to hold all the active filter options:

filteredLocations: string[] = [];

A function to toggle an option on or off:

toggle(location) {
    let indexLocation = this.filteredLocations.indexOf(location);
    if (indexLocation >= 0) {
      this.filteredLocations = this.filteredLocations.filter((i) => i !== location);
    } else {
      this.filteredLocations.push(location);
    }
}

Now change the template (timeline.ponent.html):

Remove the selection box.

Add a click handler to your button:

<button (click)="toggle(entry.location)" class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique">{{entry.location}}</button>

Lastly, the filter should accept the new filtered locations: (I just changed filteredLocation to filteredLocations)

*ngFor="let entry of timeLine | filter:filteredLocations:'location'"

本文标签： javascriptFilter by pillsbuttons instead of using a selectangularStack Overflow