角形で生成された選択要素内に検索ボックスを追加する方法

Question

選択した要素内に検索ボックスを追加しようとしています。私は角型のライブラリを使って、材料設計に角型の材料を使用しています。私は、私は、検索ボックスを見ることができていますpick a vegetable example

ISSUE

に示すように、角度、材料選択ボックスに似た何かを達成しようとしていますが、私はその箱の中に入力することはできません。したがって、フィルタリングは機能しません。私は例で説明したようにコントローラコードをどこに置くべきか分かりません。

CODE

formlyConfig.setType({ 
    name: 'select', 
    template: '<md-input-container>' 
     +'<label for="{{id + \'_\'+ $index}}">' 
     +' {{to.label}}' 
     +' </label>' 
     + '<md-select ng-model="model[options.key]"' 
        + 'md-on-close="clearSearchTerm()"' 
        + 'data-md-container-class="selectdemoSelectHeader"' 
        + '>' 
     +'<md-select-header class="demo-select-header">' 
      +'<input ng-model="searchTerm"' 
        +'type="search"' 
        +'placeholder="Search"' 
        +'class="demo-header-searchbox md-text">' 
      +'</md-select-header>' 
      +'<md-optgroup >' 
      +'<md-option ng-value="option[to.valueProp || \'value\']" ng-repeat="option in to.options |' 
       +'filter:searchTerm">{{option[to.labelProp || \'name\'] }}</md-option>' 
      +'</md-optgroup>' 
     +'</md-select>' 
     +'</md-input-container>' 

    }); 

Answer 1

私は解決策を見つけました。私はこれを修正するコントローラを追加しようとしていたが、それは動作していなかった。この作業を行うために、私は形式的にlinkオプションを使用しました。ここに作業コードがあります。

formlyConfig.setType({ 
    name: 'select', 
    template: '<md-input-container>' 
     +'<label for="{{id + \'_\'+ $index}}">' 
     +' {{to.label}}' 
     +' </label>' 
     + '<md-select ng-model="model[options.key]"' 
        + 'md-on-close="clearSearchTerm()"' 
        + 'data-md-container-class="selectdemoSelectHeader"' 
        + '>' 
     +'<md-select-header class="demo-select-header">' 
      +'<input ng-model="searchTerm"' 
        +'type="search"' 
        +'placeholder="Search"' 
        +'class="demo-header-searchbox md-text">' 
      +'</md-select-header>' 
      +'<md-optgroup >' 
      +'<md-option ng-value="option[to.valueProp || \'value\']" ng-repeat="option in to.options |' 
       +'filter:searchTerm">{{option[to.labelProp || \'name\'] }}</md-option>' 
      +'</md-optgroup>' 
     +'</md-select>' 
     +'</md-input-container>' 
     , 
     link: function(scope, el, attrs) { 
      el.find('input').on('keydown', function(ev) { 
      ev.stopPropagation(); 
     }); 
     } 

    });