允许在 ui-select 中手动输入文本 [英] Allow manually entered text in ui-select

问题描述

我正在使用 ui-select 中的选择框.一切正常，但我想允许手动输入文本，并且不想限制用户使用列表中的可用值.如果我输入文本，它会正确过滤我的列表.但是当我没有点击一个元素并移动到下一个字段时，我的文本将被丢弃.

有什么想法吗?

谢谢和问候，亚历克斯

我不想显示我的代码，因为我认为它不正确，但有人要求:

<ui-select-match placeholder="{{lists[field.id].placeholder }}">{{$select.selected.text}}</ui-select-match><ui-select-choices repeat="列表中的项目[field.id].list | filter: $select.search"><div ng-bind-html="item.text | highlight: $select.search"></div></ui-select-choices></ui-select>

数据存储在formData[field.id].selected中.field.id 是要显示的当前字段的编号(我正在动态生成表单).假设它存储了一个唯一的 int 值.

编辑 08.04.2015我的解决方案:我发现似乎没有等同于 C# 组合框的东西.所以我继续使用两个不同的字段.这不是我想要的，但现在可以使用:

<ui-select-match placeholder="{{lists[field.id].placeholder }}">{{$select.selected.text}}</ui-select-match><ui-select-choices repeat="列表中的项目[field.id].list | filter: $select.search"><div ng-bind-html="item.text | highlight: $select.search"></div></ui-select-choices></ui-select><?php echo __('如果值不在列表中，则创建一个新元素');?><div class="input-group"><span class="input-group-addon"><input type="checkbox" ng-model="disabled[field.id]"></span><input type="text" value="" ng-disabled="!disabled[field.id]" class="form-control" ng-model="formData[field.id].newValue"/>

解决方案

这里有一个解决方案:

HTML -

<ui-select-match placeholder="选择或搜索超级英雄...">{{$select.selected}}</ui-select-match><ui-select-choices repeat="getSuperheroes($select.search)中的英雄|过滤器:$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(搜索);}返回新的Supes；}

这是 CodePen 解决方案.

I am using a select box from ui-select. All is working fine, but I want to allow manually entered text and do not want to restrict the user from the values available in the list. If I type in text it filters my list correctly. But when I not click on an element and move on to the next field my text will get discarded.

Any ideas?

Thanks and regards, Alex

I did not want to show my code because I think it is not correct, but it was requested:

<ui-select ng-model="formData[field.id].selected" theme="bootstrap">
    <ui-select-match placeholder="{{ lists[field.id].placeholder }}">{{$select.selected.text}}</ui-select-match>
    <ui-select-choices repeat="item in lists[field.id].list | filter: $select.search">
        <div ng-bind-html="item.text | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

The data is stored in formData[field.id].selected. field.id is the number of the current field to display (I am generating my form dynamically). Just assume that it stores an unique int value.

Edit 08.04.2015 My solution: I found out that it seems as if there is no equivalent to a C# combobox. So I went ahead and used two separate fields. It is not what I wanted, but it works for now:

<ui-select ng-model="formData[field.id].selected" theme="bootstrap">
    <ui-select-match placeholder="{{ lists[field.id].placeholder }}">{{$select.selected.text}}</ui-select-match>
    <ui-select-choices repeat="item in lists[field.id].list | filter: $select.search">
        <div ng-bind-html="item.text | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>
<?php echo __('Create a new element if value is not in list'); ?>
<div class="input-group">
    <span class="input-group-addon">
        <input type="checkbox" ng-model="disabled[field.id]">
    </span>
    <input type="text" value="" ng-disabled="!disabled[field.id]" class="form-control" ng-model="formData[field.id].newValue" />
</div>

解决方案

here is a solution:

HTML -

<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>

CONTROLLER -

$scope.getSuperheroes = function(search) {
 var newSupes = $scope.superheroes.slice();
  if (search && newSupes.indexOf(search) === -1) {
    newSupes.unshift(search);
  }
  return newSupes;
}

Here is the CodePen solution.

这篇关于允许在 ui-select 中手动输入文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！