angular-ui-select 支持搜索的 下拉选择框 的使用
来源:互联网 发布:虚拟机网络不可用 编辑:程序博客网 时间:2024/05/25 01:36
github地址:https://github.com/angular-ui/ui-select
默认支持所有唯一性字段的匹配。可以配置只有一种。通过channelList | filter: {description: $select.search},或者通过自己对数据组装。
//异步获取渠道类型 SalesService.getChannelList().then(function(data) {data.forEach(function(item){var obj = {};obj.id = item.id;obj.text = item.description;$scope.channelTypes.push(obj);});});
ChannelService.queryUserList().then(function (res) {var data = res.data || [];for (var i = 0, len = data.length; i < len; i++) {var obj = {id: data[i].id,name: data[i].realName + ' ' + data[i].uid};$scope.userList.push(obj);}});
这样也可以组装出2个字段,3个字段,看业务需求。比如需要同时支持对realName和uid的匹配,可以拼接起来放到新的name字段中。
组件的使用:
(1) Html中:
<div class="col-sm-2"> <ui-select ng-init="search.tmpChannelId = channelList[0]" ng-model="search.tmpChannelId" uis-open-close="onOpenClose(isOpen)"> <ui-select-match placeholder="请选择渠道"> <span ng-bind="$select.selected.description"></span></ui-select-match><ui-select-choices repeat="channel in (channelList | filter: {description: $select.search}) track by $index"> <span ng-bind="channel.description"></span></ui-select-choices><ui-select-no-choice> 没有匹配的渠道</ui-select-no-choice> </ui-select></div>
ui-select: controller中绑定的被选定的数据
ui-select-match: 匹配到的数据,变色处理
ui-select-choices: 待选择的数据
ui-select-no-choice: 提示用户没有匹配的数据
filter: $select.search: 组件里面定义的过滤器
- $scope.channelList = [{ id: 0, description: '全部' }];
- // 获取渠道列表
- function getChannelList() {
- FinalStatementService.channelList().then(function (res) {
- var data = res.data;
- $scope.channelList = $scope.channelList.concat(data);
- });
- }
- getChannelList();
(2) 不使用组件filter中的单字段过滤:
- <div class="col-sm-3">
- <ui-select ng-model="search.type" uis-open-close="onOpenClose(isOpen)">
- <ui-select-match placeholder="请选择渠道">
- <span ng-bind="$select.selected.text"></span>
- </ui-select-match>
- <ui-select-choices repeat="channel in (channelTypes | filter: $select.search) track by $index">
- <span ng-bind="channel.text"></span>
- </ui-select-choices>
- <ui-select-no-choice>
- 没有匹配的渠道
- </ui-select-no-choice>
- </ui-select>
- </div>
- $scope.channelTypes = [
- {id:0,text:'全部'}
- ];
- //异步获取渠道类型
- SalesService.getChannelList().then(function(data) {
- data.forEach(function(item){
- var obj = {};
- obj.id = item.id;
- obj.text = item.description;
- $scope.channelTypes.push(obj);
- });
- });
- //查询条件
- $scope.search = {
- type: $scope.channelTypes[0],
- skuId: '',
- startTime: '',
- endTime: ''
- };
效果:
备注:
ng-options="t.id as t.type for t intypes" 代表生成的option标签<option value="t.id"> t.type</option>
这个组件里面也可以这样:
<ui-select-choices repeat="channel.id as channel.description for chanel in (channelList | filter: $select.search) track by $index">
<span ng-bind="channel.description"></span>
</ui-select-choices>
- angular-ui-select 支持搜索的 下拉选择框 的使用
- chosen.jquery.min.js的使用(select下拉框支持首字母搜索)
- 支持输入的Select下拉框
- 带搜索功能的下拉框select
- ruby on rails select下拉框的使用,包括实现下拉框内容匹配搜索
- 带搜索框选择的下拉列表
- Bootstrap选择下拉框的搜索功能
- angular中select的使用
- Atitit.ui控件---下拉菜单选择控件的实现select html
- angular-ui/ui-router的使用
- UI框架 最完美的select下拉框美化
- Bootstrap Flat UI的select下拉框显示问题解决
- vue和element ui 下拉框select的change事件
- 如何设置Select下拉选择框(菜单)的样式
- jquery---如何获取select下拉框当前选择的文本
- js控制html下拉框select的选择
- 获得select下拉选择框的值和文本
- 类似ios select下拉选择框的实现
- poj3007
- 白话 P-value 这个再通俗不过了~
- Hibernate 执行普通的sql语句,并将结果封装成DTO对象
- FZU-1548 猪数
- 当当网畅销书排行爬虫(requests+BeautifulSoup)
- angular-ui-select 支持搜索的 下拉选择框 的使用
- Android中的内存泄漏情况分析
- 4.3注册一个工具窗口
- 学习随笔(1)ObjectInputStream与ObjectOutputStream装饰器
- 代码 抽出骨架:一个精简的Openblas api实现
- 混淆配置
- springmvc和mybatis整合xml
- Android A problem was found with the configuration of task ':app:packageRelease'
- 浅谈架构,架构的基础理解