html – 在多选模式下使用md-select的md-chips

概述当我尝试从md-select中选择多个值时生成md-chips,它无法正常工作. md-chips是否仅适用于自动完成分析器和输入字段？ <md-chips ng-model="launchAPIQueryParams.type"> <md-select name="launchCalType" ng-model="launchAPIQueryParams.type" 当我尝试从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>

解决方法 简短回答：没有.
< MD-芯片>组件只需要< input>或< md-autocomplete>进入其抄袭的背景.

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

// controller.Jsangular  .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来实现你想要的.
https://www.npmjs.com/package/md-chips-select

总结

以上是内存溢出为你收集整理的html – 在多选模式下使用md-select的md-chips全部内容，希望文章能够帮你解决html – 在多选模式下使用md-select的md-chips所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。