angularjs - 在 Angular js 中使用 ui-select 的文本框下拉菜单
问题描述
我正在寻找带有 angularJS 中文本框的下拉菜单。目前我正在使用标签。我也有过滤条件。不确定如何保存用户键入的值。
<span>
<ui-select
ng-model="ele.test"
theme="selectize"
class="form-select-control select-dropdown-fixed-position"
style="width:16em;text-align:left"
name="test"
ng-change="someEvent(ele)"
ng-model-options="{ updateOn : 'default blur' }">
<ui-select-match
placeholder="Test">{{$select.selected}}</ui-select-match>
<ui-select-choices
repeat="test in testList| filter: $select.search">
<span ng-bind-html="test | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
</span>
如果用户输入的值不是下拉列表中列出的值,我必须保存它。我尝试过使用标签,但它没有用。
任何帮助表示赞赏。
解决方案
我正在寻找允许用户在下拉列表中输入,如果用户输入的值不在列表中,则保存它。我在这里找到了以下解决方案。允许在 ui-select 中手动输入文本
<ui-select ng-model="superhero.selected">
<ui-select-match placeholder="Select or search a superhero ...">
{{$select.selected}}</ui-select-match>
<ui-select-choices repeat="hero in getSuperheroes($select.search)
|filter: $select.search">
<div ng-bind="hero"></div>
</ui-select-choices>
</ui-select>
在控制器中
$scope.getSuperheroes = function(search) {
var newSupes = $scope.superheroes.slice();
if (search && newSupes.indexOf(search) === -1) {
newSupes.unshift(search);
}
return newSupes;
}
推荐阅读
- python - 如何将(.gz)数据集加载到谷歌云(使用python)
- angular - 如何为带有 router.events 下标的组件编写单元测试?
- css - Slick Slider 在打开折叠引导程序 4 时损坏
- echarts - echarts 馅饼拖动重新计算不工作 echarts 新版
- angular - 如何在功能模块中使用@ngrx/router-store
- python - 数学度坐标到气象度坐标
- powershell - 使用 power shell 脚本关闭对话框
- docker - 用命令替换 docker-compose.yml 中的环境变量
- html - Flexbox 页脚错误地缩小
- json - jq ~ 有没有更好的方法来折叠单个对象数组?