angular-ui-select 支持搜索的 下拉选择框 的使用
2017-07-15 15:11
525 查看
github地址:https://github.com/angular-ui/ui-select
默认支持所有唯一性字段的匹配。可以配置只有一种。通过channelList | filter: {description: $select.search},或者通过自己对数据组装。
这样也可以组装出2个字段,3个字段,看业务需求。比如需要同时支持对realName和uid的匹配,可以拼接起来放到新的name字段中。
组件的使用:
(1) Html中:
ui-select: controller中绑定的被选定的数据
ui-select-match: 匹配到的数据,变色处理
ui-select-choices: 待选择的数据
ui-select-no-choice: 提示用户没有匹配的数据
filter: $select.search: 组件里面定义的过滤器
Controller中获取数据:
$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>
自己对数据处理,得到除了ID之外,只包含description字段的匹配。
$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>
默认支持所有唯一性字段的匹配。可以配置只有一种。通过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: 组件里面定义的过滤器
Controller中获取数据:
$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>
自己对数据处理,得到除了ID之外,只包含description字段的匹配。
$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>
相关文章推荐
- JQUERY-SELECT 实现下拉框可以搜索、选择
- Select2使用实例——很好用的下拉提示选择框!
- 第20篇:基于bootstrap-datatimepicker带时间段的选择 (与multiselect搭配使用,与angular搭配使用)
- angular使用iosSelect插件实现城市选择
- 使用bootstrap-select完成可搜索的多选下拉列表
- Angular中ui-select的使用
- Angular2/4_ select多选组件,支持搜索
- php与前端(三):下拉框搜索 select2 的使用
- jqgrid表格下拉搜索多选框优化—使用select下拉多选插件
- 使用bootstrap-select实现下拉菜单的模糊搜索,支持单选和多选功能
- element-ui中select下拉框,选择后赋值成功,但是框上不显示的坑
- chosen.jquery.min.js的使用(select下拉框支持首字母搜索)
- 下拉框中使用json格式数据并且支持模糊搜索
- select下拉选择框美化实现代码(js+css+图片)
- Js下拉框树型选择控件(盖住select下拉框元素)
- 让VC2010的PropertyGrid支持日期下拉选择
- 让VC2010的PropertyGrid支持日期下拉选择
- PHP+ajax二级联动下拉选择菜单,IE+Firefox浏览器支持
- jquery 超级select插件 v3.2.0.0版本 支持汉字、头写拼音、英文快速定位查询的超级select插件。可方向键、tab 键快速选择。 支持 ie6.0、7.0、8.0、firefo
- OpenTest:CodedUI如何支持下拉树形列表选择?