Value not showing up when using dynamic options in ion-select

[basvdijk]

Short description of the problem:

ion-select does not accept dynamic options. E.g. when I have:

<ion-select [(ngModel)]="filter">
      <ion-option value="a">{{ option1 }}</ion-option>
      <ion-option value="b">{{ option2 }}</ion-option>
      <ion-option value="c">{{ option3 }}</ion-option>
</ion-select>

Where option1, option2, option3 are variables defined in my class:

export class HomePage {

  filter = "a";
  option1 = "Option 1";
  option2 = "Option 2";
  option3 = "Option 3";

The same problem occurs when you are using ng2-translate with the translate pipe:

<ion-select [(ngModel)]="filter">
      <ion-option value="a">{{ 'option1' | translate }}</ion-option>
      <ion-option value="b">{{ 'option2' | translate }}</ion-option>
      <ion-option value="c">{{ 'option3' | translate }}</ion-option>
</ion-select>

This is needed because the options are dependant on the language used in the app.

The ion-select stays empty when the app is launched.

What behavior are you expecting?

I expect the ion-select to show the text Option 1.

Steps to reproduce: Create a ion-select with dynamic options using template variables {{}}.

Which Ionic Version? 2.x Beta.9

Plunker that shows an example of your issue

See Plunkr.com: http://plnkr.co/edit/0JjbS4V8qXs5GUgrk3mE

Run ionic info from terminal/cmd prompt:

Cordova CLI: 6.2.0 Ionic Framework Version: 2.0.0-beta.9 Ionic CLI Version: 2.0.0-beta.30 Ionic App Lib Version: 2.0.0-beta.16 ios-deploy version: 1.8.6 ios-sim version: Not installed OS: Mac OS X El Capitan Node Version: v5.11.0 Xcode version: Xcode 7.3.1 Build version 7D1014

[jgw96]

Hello, thanks for opening an issue with us! I was able to reproduce this and will be investigating more: http://plnkr.co/edit/7CPDrgPVSDQxk4G3Cepi?p=preview . Thanks for using Ionic!

[basvdijk]

Great! :)

[NoNameProvided]

@jgw96 Will the ionic team fix this in the close future? Any ETA?

[zantos82]

@basvdijk, have you solved the issue? @jgw96, I'm on 2.0.0-rc.1 and it not solved yet, could be?

[basvdijk]

@zantos82 Do you mean 2.0.0-rc0 since? I didn't read anything about a RC1 release

[NoNameProvided]

@basvdijk There is a build for RC.1. You can run npm info ionic-angular to find out the exact version you can install. And 2.0.0-rc.1 right there, so you can run npm install ionic-angular@2.0.0-rc.1 --save.

Look at the changelog for details.

[basvdijk]

@zantos82 weird since their milestone at https://github.com/driftyco/ionic/milestone/43 is still at 56% I am going to look into it thanks!

[basvdijk]

@zantos82 tried to run it but it rains errors while compiling. So many I am unable to see what is wrong. Errors like:

L2520:  static whiteSpace: string;
            Cannot redeclare block-scoped variable 'publicMemberModifier'.
    L2519:  static stringLiteral: string;
    L2520:  static whiteSpace: string;
    L2521:  static text: string;
            Cannot redeclare block-scoped variable 'privateMemberModifier'.
    L2520:  static whiteSpace: string;
    L2521:  static text: string;
    L2522:  static punctuation: string;
            Cannot redeclare block-scoped variable 'protectedMemberModifier'.
    L2521:  static text: string;
    L2522:  static punctuation: string;
    L2523:  static className: string;

Guess I have to wait :)

[zantos82]

From 2.0.0-beta.11 to 2.0.0-rc.1 Have a lot of changes, I have changed a lot of things in my project between both version but it seems that this one have it not solved yet, I think that we must wait more.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!