Display two property combination in select option

Question

Following is my select box

<select ng-model="colour" ng-options="c.id as c.name for c in colors" ng-init="colour=2">
    <option value="">--Select Colour--</option>
</select>

and following is code in controller

$scope.colors = [
    {id: 1, name: 'black', shade: 'dark'},
    {id: 2, name: 'white', shade: 'light'},
    {id: 3, name: 'red', shade: 'dark'},
    {id: 4, name: 'blue', shade: 'dark'},
    {id: 5, name: 'yellow', shade: 'light'}
];

In this select only name of the colour is displayed and my requirement is to show both name and shade in the option text. I have tried but no luck and did not found any useful post to do this.

Anybody have some idea to display both name and shade in the select option text (ed., black dark).

Answer 1

You can append the shade to the name in the expression:

ng-options="c.id as (c.name + ' ' + c.shade) for c in colors"

Fiddle

Answer 2

Hi have to update your ng-options expression For example:

c.id as c.name + ' ' + c.shade for c in colors