angularjs - 允许在ui-select中手动输入文本

标签 angularjs ui-select

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

有任何想法吗?

谢谢并恭祝安康,
亚历克斯

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

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

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

编辑08.04.2015
我的解决方案:
我发现,似乎没有等效的C#组合框。因此,我继续使用两个单独的字段。这不是我想要的,但现在可以使用:
<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>

最佳答案

这是一个解决方案:

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

这是CodePen solution

关于angularjs - 允许在ui-select中手动输入文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29489821/

相关文章:

javascript - jQuery Joyride 和 AngularJS 实现

angularjs - 有没有办法动态设置Angularjs ui-grid的col宽度?

javascript - Angular.js : ng-disabled based on sub-string in object array

angularjs - 清除 ui-select Angular 中选定的选项

javascript - ui-select 不运行标记 mod 并且无法读取未定义的属性 'length'

javascript - 与路由提供程序一起使用时,Angular JS ng-grid 不会填充数据

html - ui-select:如何更改所选元素的背景颜色?

javascript - Angular UI 选择点击删除项目

angularjs - ui-select multiselect 在显示选项时非常慢

javascript - firebase获取子节点列表