Angularjs使用多选表单组件中的给定数组选项突出显示多个选项

时间:2016-07-16 07:35:38

标签: html angularjs

我有一系列选定的选项,我需要在所有可用选项中的select组件中突出显示这些选项数组。

1 个答案:

答案 0 :(得分:0)

标准行为已突出显示所选选项。以下示例。在示例中,默认选择了两个选项。

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>