AngularJS 1.7.8 md-select组件集成搜索框方案示例(md-select坑)

AngularJS 1.7.8 md-select组件集成搜索框方案示例(md-select坑)

最近写AngularJS遇到的坑,就是md-select这个玩意居然不支持搜索框,这种作为下拉框组件的基础功能都没有实现.......

后面这里使用md-select-header嵌入自定义内容实现,这里笔记一下:

其中: filterItems:orderItem.launchConfigurationMap.flavorId.textField:searchTerm这里面的orderItem.launchConfigurationMap.flavorId.textField其实指的是字符串,表示过滤器使用repeat循环里item里的某个字段,估计就是这个意思吧没细看,如下示意

p -> p[orderItem.launchConfigurationMap.flavorId.textField]

其中searchTerm 可以不用初始化,且可以重复声明,不会造成多个select冲突(实测如此)

                    <md-select ng-model="orderItem.launchConfigurationMap.flavorId.value"
                               ng-disabled="!isEdit"
                               ng-change="selectOnChangeByVMRow($index, orderItem.launchConfigurationMap.flavorId.value,'flavorId')"
                               ng-required>
                        <md-select-header layout="column" style="padding-left: 16px;" md-no-stretch="true">
                            <md-input-container class="md-block" style="height: 30px;">
                                <input ng-model="searchTerm" type="search" placeholder="Search..."
                                       ng-keydown="$event.stopPropagation()">
                            </md-input-container>
                        </md-select-header>
                        <md-option ng-value="x[orderItem.launchConfigurationMap.flavorId.valueField]"
                                   ng-repeat="x in orderItem.launchConfigurationMap.flavorId.optionList | filterItems:orderItem.launchConfigurationMap.flavorId.textField:searchTerm">
                            {{x[orderItem.launchConfigurationMap.flavorId.textField]}}
                        </md-option>
                    </md-select>
                </md-input-container>

其他:

也试过别的方案,典型的就是ui-select,还有select2,点进去看源码,很多年前维护的代码了,行吧

然后试了接近2小时,后面就是没试出来,处理完各种报错后,页面没有成功把组件渲染出来

参考这个 https://blog.csdn.net/luo4105/article/details/74762435

附仓库链接https://github.com/angular-ui/ui-select/wiki/Getting-Started

个人不推荐,网上找了很久Angular 1.x兼容的生态简直荒凉,这篇文章甚至还引入了JQuery.....