允许手动输入文字的用户界面选 [英] Allow manually entered text in ui-select

问题描述

我使用的用户界面上，选择一个选择框。所有工作正常，但我想允许手动输入的文本，并且不希望限制从列表中的可用值的用户。如果我输入文字可以正确过滤名单。但是，当我没有点击一个元素，并移动到下一个字段我的文字会被丢弃。

任何想法？

感谢和问候，
亚历克斯

我不想显示我的code，因为我认为这是不正确的，但它要求：

 ＆LT; UI选NG模型=FORMDATA [field.id] .selected主题=引导＆GT;
    ＆LT; UI的选择匹配占位={{名单[field.id] .placeholder}}＆GT; {{$ select.selected.text}}＆LT; / UI选匹配＆GT;
    ＆LT; UI的选择，选择重复=项中列出了[field.id] .LIST |过滤器：$ select.search＆GT;
        ＆LT; D​​IV NG绑定-HTML =item.text |亮点：$ select.search＆GT;＆LT; / DIV＆GT;
    ＆LT; / UI的选择，选择＆GT;
＆LT; / UI选＆GT;
 

中的数据被保存在 FORMDATA [field.id] .selected 。 field.id 是当前字段中显示（我生成动态我的形式）的数量。姑且认为它存储了一个唯一的int值。

编辑2015年4月8日
我的解决方案：
我发现它好像没有等同于一个C＃组合框。于是我继续使用两个独立的领域。这不是我想要的，但它的作品现在：

 ＆LT; UI选NG模型=FORMDATA [field.id] .selected主题=引导＆GT;
    ＆LT; UI的选择匹配占位={{名单[field.id] .placeholder}}＆GT; {{$ select.selected.text}}＆LT; / UI选匹配＆GT;
    ＆LT; UI的选择，选择重复=项中列出了[field.id] .LIST |过滤器：$ select.search＆GT;
        ＆LT; D​​IV NG绑定-HTML =item.text |亮点：$ select.search＆GT;＆LT; / DIV＆GT;
    ＆LT; / UI的选择，选择＆GT;
＆LT; / UI选＆GT;
＆LT; PHP的echo __（'创建一个新的元素，如果值不在名单'）; ？＆GT;
＆LT; D​​IV CLASS =输入组＆GT;
    ＆LT;跨度类=输入组插件＆GT;
        ＆LT;输入类型=复选框NG模型=禁用[field.id]＆GT;
    ＆LT; / SPAN＆GT;
    ＆LT;输入类型=文本值=NG-禁用=禁用[field.id]级=表格控NG模型=FORMDATA [field.id] .newValue/＆GT！;
＆LT; / DIV＆GT;
 

解决方案

下面是一个解决方案：

HTML -

 ＆LT; UI选NG模型=superhero.selected＆GT;
  ＆LT; UI的选择匹配占位=选择或搜索一个超级英雄......＆GT; {{$ select.selected}}＆LT; / UI选匹配＆GT;
  ＆LT; UI的选择，选择重复=英雄getSuperheroes（$ select.search）|过滤器：$ select.search＆GT;
    ＆LT; D​​IV NG绑定=英雄＆GT;＆LT; / DIV＆GT;
  ＆LT; / UI的选择，选择＆GT;
＆LT; / UI选＆GT;
 

控制器 -

  $ scope.getSuperheroes =功能（搜索）{
 变种newSupes = $ scope.superheroes.slice（）;
  如果（搜索和;＆安培; newSupes.indexOf（搜索）=== -1）{
    newSupes.unshift（搜索）;
  }
  返回newSupes;
}
 

下面是 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.

这篇关于允许手动输入文字的用户界面选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！