最近写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.....