Ionic-framework: ion-radio and ion-option do not work when they bind to object

Created on 29 Nov 2016  路  1Comment  路  Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
[ ] 1.x
[ x] 2.x

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

When I bind ion-radio (inside ion-list radio-group) to object, only first item is selected and ngModel value is not the binded object.

When I bind ion-option (inside ion-select) to object, all options are selected when I select someone and ngModel value is not the binded object.

Expected behavior:
When I bind ion-radio (inside ion-list radio-group) to object, I expect that I can select any item (not only the first) and ngModel value will be changed to the selected radio value binded to object.

When I bind ion-option (inside ion-select) to object, I expect that only one ion-option will be selected and ngModel value will be changed to the selected option value binded to object.

Steps to reproduce:

Here is http://plnkr.co/edit/0ZywzZGIVYV0eQcRy7A8?p=preview example. If you try to select Test2 item with radio you cannot do it and you will see strange output for the radio variable value. If you try to select some item with select, you will see that all options are selected.

Related code:

<h2>ion-list tradio-group [(ngModel)]="radio"</h2>
  <ion-list radio-group [(ngModel)]="radio">
    <ion-item *ngFor="let i of items">
      <ion-label>{{i | json}}</ion-label>
      <ion-radio value="{{i}}"></ion-radio>
    </ion-item>
  </ion-list>
  Here is the radio value: {{(radio||{}) | json}}

  <h2>ion-select [(ngModel)]="select"</h2>
  <ion-list>
    <ion-item>
      <ion-label>Select</ion-label>
      <ion-select [(ngModel)]="select"> 
        <ion-option *ngFor="let i of items" value="{{i}}">{{i|json}}</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>
  Here is the select value: {{(select||{}) | json}}

where radio, select, items define in the HomePage:
export class HomePage {

  appName = 'Ionic App';
  radio: any;
  select: any;
  items: any;

  constructor(private navController: NavController) { 
            this.items = [
      { value: 1, name: "Test1" },
      { value: 2, name: "Test2" }
    ]
  }

}

Other information:

I have observe this issue on ionic2.0.0, rc3 and rc3-201611211919.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3-201611211919
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.46
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.9.1
Xcode version: Not installed

Most helpful comment

Hmm it seems to be an issue with interpolation. Can you use property binding: http://plnkr.co/edit/oP271SgvnY6ljnwLxBBY?p=preview

<ion-radio [value]="i"></ion-radio>

>All comments

Hmm it seems to be an issue with interpolation. Can you use property binding: http://plnkr.co/edit/oP271SgvnY6ljnwLxBBY?p=preview

<ion-radio [value]="i"></ion-radio>
Was this page helpful?
0 / 5 - 0 ratings

Related issues

manucorporat picture manucorporat  路  3Comments

SebastianGiro picture SebastianGiro  路  3Comments

GeorgeAnanthSoosai picture GeorgeAnanthSoosai  路  3Comments

alexbainbridge picture alexbainbridge  路  3Comments

danbucholtz picture danbucholtz  路  3Comments