javascript - Angular 4 - åpne valg ved klikk på etikett

Hvordan kan jeg åpne select når jeg klikker på label?

<label>filter per category: <span>{{ articleListService.selectedCategory }}</span></label>
<select #category (change)="articleListService.categoryFilter2()" [(ngModel)]="articleListService.formModel.category">
    <option value="">All</option>
    <option *ngFor="let category of articleListService.laCategoryList" value="{{ category.id }}">
        {{ category.name }}
    </option>
</select>

Takk for hjelpen, jeg er fortapt

Svar #1

Godt spørsmål, dette er mer en HTML 5-ting enn en Angular-ting. Du vil bruke en for={id}.

Så i din spesifikke kode, vil det se omtrent slik ut.

<label for="category">filter per category: [cat group shows here]</label>

<select id="category" #category (change)="articleListService.categoryFilter2()" [(ngModel)]="articleListService.formModel.category">
  <option value="">All</option>
  <option *ngFor="let category of articleListService.laCategoryList" value="{{category.id }}">
    {{ category.name }}
  </option>
</select>
  • For ytterligere referanse om hvordan man bruker for med etiketter, se den offisielle MDN om etiketter.

Svar #2

Fant en artikkel som ligner på det du spør om, men du må ha etiketten som forelder til valget?

https://medium.com/browserquirks/browserquirk-programmatically-opening-a-select-box-4ca745a8468f

eller kanskje prøv å legge til en malreferanse til select, og deretter @ViewChild('ThatReference') thatRef: ElementRef;

så kanskje når du klikker på etiketten, og det utløser en hendelse for å trigge klikkhendelsen på select via this.thatRef.nativeElement.click()?

Relaterte artikler