CODEWITHSUNDEEP
angularangular-ngselect
Dev Db
Dev Db

Reputation: 760

Ng-select display different value than dropdown menu

I want my DropDown to display the property name as Description, bind the id property to a model and display the the property ScoreName of the selected item. Is there a way to achieve that with ng-select?

Scores = [
  { id:1, ScoreName:'1', Description:'Bad' }, 
  { id:2, ScoreName:'2', Description:'Good' },
  { id:3, ScoreName:'3', Description:'Best' }
]

<ng-select class="score" name="score" appendTo="body" [loading]="!loaded" 
   [items]="Scores" bindLabel="ScoreName" bindValue="ScoreName" 
   placeholder="" [(ngModel)]="row.Score">
</ng-select>

Upvotes: 2

Views: 2938

Answers (2)

Undefined
Undefined

Reputation: 29

I know it's a bit late but maybe it will help someone else.

You can use custom templates as IdiakosE already said.

<ng-select class="score" name="score" appendTo="body" [loading]="!loaded" 
   [items]="Scores" bindLabel="ScoreName" bindValue="id" 
   placeholder="" [(ngModel)]="row.Score">
   <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
    {{item.Description}}
   </ng-template>   
</ng-select>

Upvotes: 2

IdiakosE Sunday
IdiakosE Sunday

Reputation: 116

Hello if you still need this you could use custom templates and you cannot use bindValue with objects explanation. See here for examples of custom templates

Upvotes: 0

Related Questions