Search code examples
htmlcssangularjsng-options

Highlight selected value in drop down in angularjs


I would like to display the selected value in the drop down in angularjs.

<!DOCTYPE html>
<html>
  <script
 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> 
  </script>
<body>
  <div><select class="form-control" size="30" style=" 
        height:100px;width:100px" ng-model="value" ng-options="c.name for c 
        in customers track by c.id" ng-change="onChange">
       <option value="" selected hidden />
        </select></div>
</body>
</html>

By doing the above way it doesn't highlight the selected value.If I change the ng-options as ng-options="c.id as c.name for c in customers track by c.id". In the value I see id instead of name.


Solution

  • You are missing ng-selected attribute, add attribute ng-selected="value" to your select element. And you don't need the option element, and also the track by statement needs to be removed.

    <select class="form-control" size="30" style=" height:100px;width:100px" 
           ng-model="value" ng-selected="value" 
           ng-options="c.id as c.name for c in customers">
    </select>