如何在 angular-formly 生成的 select 元素内添加搜索框

Question

我正在尝试在 select 元素内添加一个搜索框。我正在使用 angular-formly 库和 angular-formly-material 进行 material 设计。我正在尝试实现类似于 angular-material select 框的内容，如 pick a vegetable example

所示

问题

我可以看到搜索框，但无法在该框中输入内容。因此过滤不起作用。我不知道在哪里放置一些控制器代码，如示例中所述。

代码

   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();
      });
        }

   });

如何在 angular-formly 生成的 select 元素内添加搜索框

How to add a search box inside select element generated by angular-formly

javascript

angularjs

angular-material

angular-formly