我无法在服务门户页面中使用有效的多选下拉菜单。我已经在小部件中更新了CSS include和JS include的依赖关系。有人可以给我一些建议吗?
我正在追踪link
AngularJS材质->选择->选择标题如下:
In UI Script: JS Include
angular
.module('selectDemoSelectHeader', ['ngMaterial'])
.controller('SelectHeaderController', function($scope, $element) {
$scope.vegetables = ['Corn' ,'Onions' ,'Kale' ,'Arugula' ,'Peas', 'Zucchini'];
$scope.searchTerm;
$scope.clearSearchTerm = function() {
$scope.searchTerm = '';
};
// The md-select directive eats keydown events for some quick select
// logic. Since we have a search input here, we don't need that logic.
$element.find('input').on('keydown', function(ev) {
ev.stopPropagation();
});
});
CSS Include
.selectdemoSelectHeader {
/* Please note: All these selectors are only applied to children of elements with the 'selectdemoSelectHeader' class */ }
.selectdemoSelectHeader .demo-header-searchbox {
border: none;
outline: none;
height: 100%;
width: 100%;
padding: 0; }
.selectdemoSelectHeader .demo-select-header {
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12);
padding-left: 10.667px;
height: 48px;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
width: auto; }
.selectdemoSelectHeader md-content._md {
max-height: 240px; }
<div ng-controller="SelectHeaderController" class="md-padding" ng-cloak>
<div>
<h1 class="md-title">Pick a vegetable below</h1>
<div layout="row">
<md-input-container>
<label>Vegetables</label>
<md-select ng-model="selectedVegetables"
md-on-close="clearSearchTerm()"
data-md-container-class="selectdemoSelectHeader"
multiple>
<md-select-header class="demo-select-header">
<input ng-model="searchTerm"
type="search"
placeholder="Search for a vegetable.."
class="demo-header-searchbox md-text">
</md-select-header>
<md-optgroup label="vegetables">
<md-option ng-value="vegetable" ng-repeat="vegetable in vegetables |
filter:searchTerm">{{vegetable}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
</div>
</div>
</div>