CODEWITHSUNDEEP
ionic2
James Corey
James Corey

Reputation: 98

Ionic 2 ion-select dynamically generated. How do I clear the list of options?

I have a form in my Ionic 2 project that has 2 ion-select dropdowns. When the user selects an option in the 1st dropdown it generates the options of the 2nd dropdown. This works fine. My question is, if the user changes their selection for the 1st dropdown the selected 2nd option does not clear out. How do I get it to clear so the user is not confused about the options for the new select?

  <ion-item>
    <ion-label>
      <img height="100" src="assets/img/customer.png" alt="Customer"/>
    </ion-label>
    <ion-select [(ngModel)]="customer" name="customer" (ionChange)="addBuildings(customer);" placeholder="Customer">
      <ion-option *ngFor="let customer of customers" value="{{customer.name}}">{{customer.name}}</ion-option>
    </ion-select>
  </ion-item>
  <ion-item>
    <ion-label>
      <img height="100" src="assets/img/building.png" alt="Building"/>
    </ion-label>
    <ion-select [(ngModel)]="building" name="building" placeholder="Building">
      <ion-option *ngFor="let building of buildings" value="{{building.name}}">{{building.name}}</ion-option>
    </ion-select>
  </ion-item>

Upvotes: 0

Views: 1059

Answers (1)

James Corey
James Corey

Reputation: 98

I solved this by using the ngModel and setting it to null in the .ts at the beginning of the .addBuildings() function.

Upvotes: 1

Related Questions