我正在使用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值即可。
formData[field.id].selected
field.id
编辑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>
控制器-
$scope.getSuperheroes = function(search) { var newSupes = $scope.superheroes.slice(); if (search && newSupes.indexOf(search) === -1) { newSupes.unshift(search); } return newSupes; }
这是CodePen解决方案。