2016-05-26 2 views
3

md-selectから複数の値を選択してmd-chipを生成しようとしているとき、動作しません。 md-chipはオートコンプリートアナライザと入力フィールドでのみ動作しますか?
マルチ選択モードでmd-selectを使用する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> 

答えて

5

短い答え:いいえ <md-chips>成分は、そのトランスクルードコンテキストに<input>又は<md-autocomplete>をとるであろう。

ただし、md-autocompeletでも同じことができます。 md-min-lengthのキーは<md-autocomplete>に設定されているので、メニューは<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-select>を置くことができる<md-item-template>を公開doc for md-autocompleteをチェックして、あなたが表示されます。

<select>を使用することを本当に主張している場合は、npmにサードパーティのコンポーネントがあり、あなたが望むことをするmd-chips-selectが呼び出されます。 https://www.npmjs.com/package/md-chips-select

関連する問題