Question

我正在尝试在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元素中添加一个搜索框

1 个答案: