分组下拉列表.在有角度的材料js中

Question

我正在尝试使UI类似于屏幕截图中给出的UI。用棱角分明的js材料可以做到这一点吗。(v1.18(此ui

Answer 1

从https://material.angularjs.org/latest/demo/select在"；选项组"；区段：

<div ng-controller="SelectOptGroupController" class="md-padding" ng-cloak>
<div>
<h1 class="md-title">Pick your pizza below</h1>
<div layout="row">
<md-input-container style="margin-right: 10px;">
<label>Size</label>
<md-select ng-model="size">
<md-optgroup label="No Surcharge">
<md-option ng-repeat="size in sizes | filter: {surcharge: 'none'}"
value="{{size.name}}">{{size.name}}</md-option>
</md-optgroup>
<md-optgroup label="Additional Surcharge">
<md-option ng-repeat="size in sizes | filter: {surcharge: 'extra'}"
value="{{size.name}}">{{size.name}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
<md-input-container>
<label>Toppings</label>
<md-select ng-model="selectedToppings" multiple>
<md-optgroup label="Meats">
<md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'meat'}">
{{topping.name}}</md-option>
</md-optgroup>
<md-optgroup label="Veggies">
<md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'veg'}">
{{topping.name}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
</div>
<p ng-if="selectedToppings">You ordered a {{size.toLowerCase()}} pizza with
{{printSelectedToppings()}}.</p>
</div>
</div>

以及以下JS：

angular
.module('selectDemoOptGroups', ['ngMaterial'])
.controller('SelectOptGroupController', function($scope) {
$scope.sizes = [
{ surcharge: 'none', name: "small (12-inch)" },
{ surcharge: 'none', name: "medium (14-inch)" },
{ surcharge: 'extra', name: "large (16-inch)" },
{ surcharge: 'extra', name: "giant (42-inch)" }
];
$scope.toppings = [
{ category: 'meat', name: 'Pepperoni' },
{ category: 'meat', name: 'Sausage' },
{ category: 'meat', name: 'Ground Beef' },
{ category: 'meat', name: 'Bacon' },
{ category: 'veg', name: 'Mushrooms' },
{ category: 'veg', name: 'Onion' },
{ category: 'veg', name: 'Green Pepper' },
{ category: 'veg', name: 'Green Olives' }
];
$scope.selectedToppings = [];
$scope.printSelectedToppings = function printSelectedToppings() {
var numberOfToppings = this.selectedToppings.length;
// If there is more than one topping, we add an 'and'
// to be grammatically correct. If there are 3+ toppings,
// we also add an oxford comma.
if (numberOfToppings > 1) {
var needsOxfordComma = numberOfToppings > 2;
var lastToppingConjunction = (needsOxfordComma ? ',' : '') + ' and ';
var lastTopping = lastToppingConjunction +
this.selectedToppings[this.selectedToppings.length - 1];
return this.selectedToppings.slice(0, -1).join(', ') + lastTopping;
}
return this.selectedToppings.join('');
};
});