3. Onsen + Angular with "ons-select" on change

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Onsen + Angular with "ons-select" on change

  • D

    Hi everyone, i’m new with OnsenUI and have a very poor experience with angular in general.
    I’m trying to develop a select-option template that catches data from my server and populate a list based on selected option value. Here it is my code:

    <ons-select id="selectValue" [(ngModel)]="selectedValue" [attr.item]="selectedValue">
   <option *ngFor="let item of valuesList" [value]="item">
         {{ item.name }}
   </option>
</ons-select>

    I would like to put data that are inside “selectedValue” model into an “ons-list”:

    ...
<ons-list-item style="padding-left: 0px" *ngFor="let item of selectedValue">
   <h2>{{item.title}}</h2>
   <p>{{item.message}}{{item.value}}</p>
</ons-list-item>
...

    If you need more information to give me help, ask here… i will edit this message with new information. Hope everything is clear and that someone can help me.

    0

  • Considering the data structure, it is needed to add a key for the array in selectedValue.

    valuesList = [
  {
    name: 'foo',
    items: [
      { id: 1, title: 'title001', message: 'msg001', value: 'value001'},
      { id: 2, title: 'title002', message: 'msg002', value: 'value002'},
      { id: 3, title: 'title003', message: 'msg003', value: 'value003'},
    ]
  },
  {
    name: 'bar',
    items: [
      { id: 4, title: 'title004', message: 'msg004', value: 'value004'},
      { id: 5, title: 'title005', message: 'msg005', value: 'value005'},
      { id: 6, title: 'title006', message: 'msg006', value: 'value006'},
    ]
  }
];

selectedValue = this.valuesList[0];

    Moreover, I don’t recommend to use ons-select with [ngValue] because it supports only string currently.

    <select class="select-input" [(ngModel)]="selectedValue">
  <option *ngFor="let value of valuesList" [ngValue]="value">
    {{ value.name }}
  </option>
</select>

<ons-list>
  <ons-list-item *ngFor="let item of selectedValue.items">
    <h2>{{item.title}}</h2>
    <p>{{item.message}}{{item.value}}</p>
  </ons-list-item>
</ons-list>

    Here’s a live demo.
    https://stackblitz.com/edit/ngx-onsenui-topic-3319

    Cheers,
    puku0x

    0