Below I have p-dropdown of apple. I want to get apple id and apple desc using onchange, i am only able to see apple id as value in Onchange apple event. can i get both apple id and apple desc in Onchange apple event in Javascript?
<div class="p-col-12 p-md-4">
<div class="p-field">
<label for="apple">Apple</label>
<p-dropdown [options]="apples" name="apple" id="apple" #name="ngModel"
[(ngModel)]="fruits.appleId" optionLabel="appleDesc"
optionValue="appleId" filterBy="appleId,appleDesc" [showClear]="false"
placeholder="Select Item" [virtualScroll]="true" [itemSize]="50" [filter]="true" appendTo="body"
(onChange)="onChangeApple($event)">
<ng-template let-apple pTemplate="selectedItem">
<div>
<div>{{apple.appleId+ ' - ' + apple.appleDesc}}</div>
</div>
</ng-template>
<ng-template let-apple pTemplate="item">
<div>
<div>{{apple.appleId+ ' - ' + apple.appleDesc}}</div>
</div>
</ng-template>
</p-dropdown>
</div>
</div>
Here I tried using onchange apple event to get id and desc. event input property here only has apple id, can i get apple desc at same time?
onChangeApple(event) {
console.log('event :' + event);
console.log(event.value); //here value is apple id,i also want appledesc here,but i don't see it in event property to get it.
}
If you want the entire object, then just remove optionValue
and optionLabel
this will give you the entire object, note: the ngModel
will also have the entire object.
<div class="p-col-12 p-md-4">
<div class="p-field">
<label for="apple">Apple</label>
<p-dropdown
[options]="cities"
name="apple"
id="apple"
#name="ngModel"
[(ngModel)]="appleId"
filterBy="appleId,appleDesc"
[showClear]="false"
placeholder="Select Item"
[virtualScroll]="true"
[itemSize]="50"
[filter]="true"
appendTo="body"
(onChange)="onChangeApple($event)"
>
<ng-template let-apple pTemplate="selectedItem">
<div>
<div>{{apple.appleId+ ' - ' + apple.appleDesc}}</div>
</div>
</ng-template>
<ng-template let-apple pTemplate="item">
<div>
<div>{{apple.appleId+ ' - ' + apple.appleDesc}}</div>
</div>
</ng-template>
</p-dropdown>
</div>
</div>
If you want only the change to contain the entire object, just do an array find operation, to get the entire object.
onChangeApple(event) {
console.log('event :' + JSON.stringify(event));
const found = this.cities.find((item: any) => item.appleId === event.value);
console.log(found); //here value is apple id,i also want appledesc here,but i don't see it in event property to get it.
}