I have a static dropdown in AngularJS, want it to be dynamic with Firebase

Question

I have an ionic, typescript, AngularJS, Pohnegap developed app. One function that I have is to collect information male or female - I have made this static form

<ion-item>
<ion-label>Brand</ion-label>
  <ion-select interface="popover">
    <ion-option value="heineken">Heineken</ion-option>
    <ion-option value="carlsberg">Carlsberg</ion-option>
  </ion-select>
</ion-item>

That works and you can select either Female or Male, I like to make this dynamic by pulling the data to select from Firebase.

So I did this in my html file

<ion-item>
  <ion-label stacked>Type of Trash</ion-label>
      <ion-select [(ngModel)]="BrandsList (ionChange)="onSelectChange($event)">
       <ion-option value="typeofbrand" *ngFor="let title of BrandsList"> {{title}}
      </ion-option>  
      </ion-select>
</ion-item>

And in my .ts file I added this

    BrandsList: FirebaseListObservable<any>;
    ...
    this.BrandsList = db.list('/brands/');

I can not get the dynamic part to work, any ideas what I'm doing wrong.

See below for the image from my firebase database.

Appreciate any help, I can get.

score 0 · Answer 1 · answered Oct 02 '17 at 15:39

0

I think you should change this part:

<ion-item>
  <ion-label stacked>Type of Trash</ion-label>
      <ion-select [(ngModel)]="BrandsList (ionChange)="onSelectChange($event)">
       <ion-option value="typeofbrand" *ngFor="let title of BrandsList"> {{title}}
      </ion-option>  
      </ion-select>
</ion-item>

to this other one:

<ion-item>
  <ion-label stacked>Type of Trash</ion-label>
      <ion-select [(ngModel)]="BrandsList (ionChange)="onSelectChange($event)">
       <ion-option value="typeofbrand" *ngFor="let brand of BrandsList"> {{brand.title}}
      </ion-option>  
      </ion-select>
</ion-item>

Because you have to search first on the brand and after on the property

I hope this works to you! (:

answered Oct 02 '17 at 15:39

cancelajavi

151
6

Thanks, I tried that - when I click on the option to show I'm not getting the options. The data is there in an array no data shows to select. – Totta Zetterlund Oct 03 '17 at 08:20
Here is how my brand data looks when displayed with console.log Brand: {color: "#551744", date: 1501851055348, description: "The famous Coca Cola brand", icon: "", title: "Coca Cola", …} Brand: {color: "#CA85E2", date: 1501851143114, description: "The coffee company Starbuck with there coffee mugs ", icon: "", title: "Starbuck", …} – Totta Zetterlund Oct 03 '17 at 08:21

I have a static dropdown in AngularJS, want it to be dynamic with Firebase

1 Answers1