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-3319Cheers,
puku0x