lakshman chanapathi lakshman chanapathi - 4 months ago 36
HTML Question

Angularjs highlighting multiple options with given array of options in multi select form component

I have an array of selected options and i need to highlight these array of options in select component among all available options..

Answer

The standard behavior already highlights the selected options. Example below. In the example two options are selected by default.

angular
  .module('exampleApp', [])
  .controller('ExampleController', ExampleController);

function ExampleController() {
  var vm = this;
  vm.options = [{
    id: '1',
    name: 'Option A'
  }, {
    id: '2',
    name: 'Option B'
  }, {
    id: '3',
    name: 'Option C'
  }];
  vm.selectedOptionNames = ['Option B', 'Option C'];
}
<!DOCTYPE html>
<html ng-app='exampleApp'>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>

<body ng-controller="ExampleController as vm">
  <form name="myForm">
    <label for="multipleSelect">Make a choice:</label>
    <select name="multipleSelect" id="multipleSelect" ng-options="option.name as option.name for option in vm.options" ng-model="vm.selectedOptionNames" multiple>
    </select>
  </form>
</body>

</html>