多选模式下带有 md-select 的 md-chips

Posted 2023-03-05

【中文标题】多选模式下带有 md-select 的 md-chips

【英文标题】：md-chips with md-select in multi select mode

【发布时间】：2016-09-24 10:58:07

【问题描述】：

当我尝试从 md-select 中选择多个值来生成 md-chips 时，它不起作用。 md-chips 是否仅适用于自动完成分析器和输入字段？

<md-chips ng-model="launchAPIQueryParams.type">
   <md-select name="launchCalType" ng-model="launchAPIQueryParams.type" 
                       multiple="true" placeholder="Launch Type"
                       md-on-close='applylaunchFilter("type")'>
        <md-option ng-repeat="typeOption in launchTypeOptions" ng-value="typeOption[1]">
                  typeOption[0]
         </md-option>
    </md-select>
</md-chips>

【参考方案1】：

简短的回答：不。 <md-chips> 组件只会将 <input> 或 <md-autocomplete> 带入其转入的上下文中。

但是，md-autocompelet 可以实现相同的效果。 将 <md-autocomplete> 上的 md-min-length 设置为 0，因此它将自动显示菜单，就像 <md-select> 菜单一样。 这是一个例子：

// controller.js
angular
  .moduel('mdChipsDemo', [])
  .controller('MdChipsDemoCtrl', function() 
    var vm = this;
    vm.selectedOption = '';
    vm.searchText = '';
    vm.launchAPIQueryParams = 
        types: [],
    ;

    vm.launchTypeOptions = [
        name: 'Op1', value: 1,
        name: 'Op2', value: 2,
        name: 'Op3', value: 3,
        name: 'Op4', value: 4,
    ];
);

// template.html
<div ng-app="mdChipsDemo" ng-controller="MdChipsDemoCtrl as vm">
<md-chips ng-model="vm.launchAPIQueryParams.types">
  <md-autocomplete
            md-selected-item="vm.selectedOption"
            md-search-text="vm.searchText"
            md-items="typeOption in vm.launchTypeOptions"
            md-item-text="typeOption.name"
            md-min-length="0"
            placeholder="Search for a launchTypeOptions">
      <span md-highlight-text="vm.searchText">typeOption.name</span>
  </md-autocomplete>
  <md-chip-template>
    <span>$chip.name</span>
  </md-chip-template>
</md-chips>
</div>

如果您的最终目标是拥有多项选择功能，<md-autocomplete> 也可以公开<md-item-template>，您可以将<md-select> 放入其中。检查doc for md-autocomplete，您会看到。

或者，如果您真的坚持使用 <select>，那么 npm 调用 md-chips-select 上有一个 3rd-party 组件可以满足您的需求。 https://www.npmjs.com/package/md-chips-select