CODEWITHSUNDEEP
arraysjsonangularselectionic-framework
ucnumara
ucnumara

Reputation: 165

How to show datas under the value in angular2/ionic2

home.ts

items = [];

   constructor(public navCtrl: NavController) {
     this.initializeItems();}
     initializeItems() {
     this.items = [
       {
        'title': 'Fiat',
        "models" : [
          {"model":"500L","value":1,"specs":"hatchback"},
          {"model":"Linea","value":2,"specs":"sedan"}
        ]
      }]

brand.html

  <ion-list>
    <ion-item>
      <ion-label>Models</ion-label>
      <ion-select id="secim" [(ngModel)]="values">
        <ion-option *ngFor="let m of item.models" value="{{m.value}}">{{m.model}}</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>

  <div class="" *ngIf="values==1">
    <h1 *ngFor="let m of item.models">{{m.model}}:{{m.specs}}</h1>
  </div>
  <div class="" *ngIf="values==2" >
    <h1 *ngFor="let m of item.models">{{m.model}}:{{m.specs}}</h1>
  </div>

It's appear like this

500L:hatchback Linea:sedan

but I want to do like this

(if select value=1) 500L:hatchback

(if select value=2) Linea:sedan

How could I do? Thank you

Upvotes: 1

Views: 32

Answers (1)

AVJT82
AVJT82

Reputation: 73367

Instead of what you are doing now, why not store the selected model to a variable, of which you can then show model and specs, so for example have a variable selectedModel:

<ion-item>
  <ion-label>Models</ion-label>
  <ion-select id="secim" [(ngModel)]="selectedModel">
    <ion-option *ngFor="let m of item.models" [value]="m">{{m.model}}</ion-option>
  </ion-select>
</ion-item>

And then just have one div to show the other properties: 

<div *ngIf="selectedModel">{{selectedModel.model}}:{{selectedModel.specs}}</div>

DEMO: http://plnkr.co/edit/1xwhtwB5YjKHDbRzusHP?p=preview

Upvotes: 1

Related Questions