How to filter second dropdown based on selection of first dropdown? - Angular

问题

I have a two dropdowns that looks like this:

so my plan is to load all subcategories, but I would like to display in dropdown only these which are related to selected Category ( that one which contain ParentId as Id of selected Category).

And here is my code:

<!--Category-->

<div class="form-group">
  <label class="control-label dash-control-label col-xs-3">Category:</label>
  <div class="col-xs-9">
    <select class="form-control select2" style="width: 100%;"
            data-minimum-results-for-search="Infinity" name="articleCategory" #articleCategory="ngModel" required [(ngModel)]="article.mainCategory">
      <option disabled [ngValue]="null">-/-</option>
      <option [ngValue]="category" *ngFor="let category of mainGroups">{{category.title}}</option>
    </select>
  </div>
</div>

<!--Subcategory-->

<div class="form-group">
  <label class="control-label dash-control-label col-xs-3">Sub category:</label>
  <div class="col-xs-9">
    <select class="form-control select2" style="width: 100%;" name="subCategory" #subCategory="ngModel" required [(ngModel)]="article.subCategory">
      <option disabled [ngValue]="null">-/-</option>
      <option [ngValue]="subcategory" *ngFor="let subcategory of subCategories">{{subcategory.title}}</option>
    </select>
  </div>
</div>

If I need to post typescript code please tell me, but Here I got values from database, and this is only problem for me, how to filter Subcategory based on Category selection.

Thanks guys Cheers!

回答1:

As some of the comments pointed out, listen to the change of you first select element to dynamically generate the options for you second select with a filter.

Something like:

filterSubById(id) {
    return this.subCategories.filter(item => item.parentId === id);
}

I've made a quick working demo to show how.

EDIT

The way this works is that the selected value from the first select is bound to the mainCategory property of your component. Hence, mainCategory changes depending on what the user selects from the first menu. The second select dynamically loads the options depending on what the user chooses on the first one; this is accomplished with a filter function that returns all the elements in the subCategories array whose parentId matches the id of the option selected in the first menu.

回答2:

It's a very broad question with many correct answers. I would say the best thing to do is to add (change)="filterSubcategories()" to your select element, that will trigger the filterSubcategories() function, where you can select the correct subcategories, based on your article.mainCategory.

 <!--Category-->

<div class="form-group">
  <label class="control-label dash-control-label col-xs-3">Category:</label>
  <div class="col-xs-9">
    <select class="form-control select2" style="width: 100%;"
            data-minimum-results-for-search="Infinity" (change)="filterSubcategories()" name="articleCategory" #articleCategory="ngModel" required [(ngModel)]="article.mainCategory">
      <option disabled [ngValue]="null">-/-</option>
      <option [ngValue]="category" *ngFor="let category of mainGroups">{{category.title}}</option>
    </select>
  </div>
</div>

来源：https://stackoverflow.com/questions/49899972/how-to-filter-second-dropdown-based-on-selection-of-first-dropdown-angular

标签

angular

angular-template