多选模式下带有 md-select 的 md-chips [英] md-chips with md-select in multi select mode
问题描述
当我尝试从 md-select 中选择多个值时生成 md-chips 时，它不起作用.md-chips 是否仅适用于自动完成分析器和输入字段?
<md-select name="launchCalType" ng-model="launchAPIQueryParams.type"多个=真"占位符=启动类型"md-on-close='applylaunchFilter("type")'><md-option ng-repeat="launchTypeOptions 中的typeOption" ng-value="typeOption[1]">{{typeOption[0]}}</md-option></md-选择></md-chips> 简短的回答:不. 或
然而，同样的事情可以用 md-autocompelet 来实现.键在 <md-autocomplete> 上设置 md-min-length 为 0，所以它会像 <md- 一样自动显示菜单select> 菜单将是.举个例子:
//controller.js有角的.moduel('mdChipsDemo', []).controller('MdChipsDemoCtrl', function() {var vm = 这个；vm.selectedOption = '';vm.searchText = '';vm.launchAPIQueryParams = {类型:[],};vm.launchTypeOptions = [{名称:'Op1'，值:1}，{名称:'Op2'，值:2}，{名称:'Op3'，值:3}，{名称:'Op4'，值:4}，];});//模板.html<div ng-app="mdChipsDemo" ng-controller="MdChipsDemoCtrl as vm"><md-chips ng-model="vm.launchAPIQueryParams.types"><md-自动完成md-selected-item="vm.selectedOption"md-search-text="vm.searchText"md-items="vm.launchTypeOptions 中的typeOption"md-item-text="typeOption.name"md-min-length="0"placeholder="搜索launchTypeOptions"><span md-highlight-text="vm.searchText">{{typeOption.name}}</span></md-自动完成><md-chip-模板><span>{{$chip.name}}</span></md-chip-template></md-chips>如果您的最终目标是具有多项选择功能，<md-select> in. 检查 doc for md-autocomplete 你会看到的.
或者，如果你真的坚持使用 ，npm 上有一个 3rd-party 组件调用 md-chips-select 可以做你想要的.https://www.npmjs.com/package/md-chips-select
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>
The short answer: No.
<md-chips> component will only takes <input> or <md-autocomplete> into its transcluded context.
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>
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.
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屋！
