在多选模式下使用md-select的md-chips [英] md-chips with md-select in multi select mode

问题描述

当我尝试从md-select中选择多个值时生成md-chip时，它不起作用. md-chips仅适用于自动完成分析仪和输入字段吗?

When I am trying to generate md-chips on selecting multiple values from md-select, It is not working. Does md-chips works only with autocomplete analyser and input field?

<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>

推荐答案

简短答案:否. <md-chips>组件只会将<input>或<md-autocomplete>带入其已包含的上下文中.

The short answer: No. <md-chips> component will only takes <input> or <md-autocomplete> into its transcluded context.

但是，使用md-autocompelet可以实现相同的目的. 该键在<md-autocomplete>上的md-min-length设置为0，因此它将自动显示菜单，就像<md-select>菜单一样. 这是一个示例:

However, the same thing can be achieved with md-autocompelet. The key is set md-min-length on <md-autocomplete> to 0 so it will auto show the menu just like what a <md-select> menu would be. Here's an example:

// 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>.请检查

If your ultimate goal is to have multiple select ability, <md-autocomplete> also expose <md-item-template> where you can put your <md-select> in. Check the doc for md-autocomplete and you will see.

或者，如果您真的坚持使用<select>，则npm调用md-chips-select上有一个第三方组件可以满足您的要求. https://www.npmjs.com/package/md-chips-select

Or if you really insist on using <select>, there's an 3rd-party component on npm calls md-chips-select which does what you want. https://www.npmjs.com/package/md-chips-select

这篇关于在多选模式下使用md-select的md-chips的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！