分组下拉菜单。在角材料js中

Question

我正在尝试使 UI 类似于屏幕截图中给出的 UI。这是否可以使用 Angular js 材料。(v1.1.8)This ui

Answer 1

在“选项组”部分找到来自 https://material.angularjs.org/latest/demo/select 的以下 sn-p：

<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('');
      };
    });