javascript - Filtrera med piller/knappar istället för att använda en select - angular

Jag bygger med Angular och har använt ett filterrör för att filtrera på det valda alternativet från min dropdown i *ngFor-loopen. Innehållet filtreras då därefter. Jag vill byta ut valalternativen mot knappar eller piller. Så när en knapp klickas sker filtret - knappen kommer att fungera som en på/av-knapp så att du kan ha fler än ett alternativ filtrerat.

Här är mitt stackblitz-exempel - https://stackblitz.com/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>

Jag är inte säker på hur man får knapparna att fungera på samma sätt eftersom ingen filtrering sker.... all hjälp uppskattas!?

Svar #1

Binda en klickhändelse (click)="filteredLocation=entry.location" till knappen

Prova så här:

 <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>

Funktionerande Demo

Svar #2

Kärnan i detta är bara att tilldela värdet av knappen/omkopplaren till din filteredLocation-variabel som nedan

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

Uppdaterad demo

Hoppas det här hjälper :)

Relaterade artiklar