Monaca Onsen UI Discord Chat Github Repo

Onsen + Angular with "ons-select" on change



  • 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.



  • 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