Hi there, this blog shows that how to display two properties combination in select drop down in angular.

Suppose we have following angular controller:

angular.module('MyModule', [])
.controller('MyController', function( $scope ) {    
    $scope.colors = [
        {id: 11, name: 'black', shade: 'dark'},
        {id: 22, name: 'white', shade: 'light'},
        {id: 32, name: 'red', shade: 'dark'},
        {id: 44, name: 'blue', shade: 'dark'},
        {id: 5, name: 'yellow', shade: 'light'}
    ];
});

Following is the way to render select drop down in html view:

<div ng-app='MyModule' ng-controller="MyController">
    <select ng-model="color" ng-options="c.id as c.name for c in colors">
    <option value="">--Select Color--</option>
    </select>
    
    <p>You have selected color: {{color}}</p>
</div>

This select shows name of the color in the drop down (DEMO). But what if we need to display two properties combination in the select drop down eg., name and shade of the color like “black dark”?

We can do this by following two ways:

  • By concatenating properties in ng-options like:
    <select ng-model="colour" ng-options="c.id as (c.name + ' ' + c.shade) for c in colors">
        <option value="">--Select Colour--</option>
    </select>
    

    DEMO

  • By concatenating properties in option tag of select like:
    <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>
    

    DEMO

Hope this helps 🙂 .