Showing two combinations of properties in a selection option

Question

Below is the selection 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 the following code in the 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 selection, only the color name is displayed, and my requirement is to display the name and shadow in the option text. I tried, but no luck and did not find a helpful message to do this.

Does anyone have an idea to display both the name and the hue in the text of the selection option (ed., black dark).

Answer 1

You can add a shadow to the name in the expression:

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

Fiddle

Answer 2

Hi, you need to update the expression ng-options For example:

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

Answer 3

<div ng-app='MyModule' ng-controller="MyController">
    <select ng-model="colour">
        <option value="">--Select Client--</option>
        <option ng-value="c.id" ng-selected="c.id==11"
            ng-repeat="c in colors">{{c.name + ' ' + c.shade}}</option>
    </select>

    <p>You have selected colour: {{colour}}</p>
</div>

---

Fiddle