Разрешить вводимый вручную текст в ui-select

Question

Я использую поле выбора из ui-select. Все работает нормально, но я хочу разрешить вводимый вручную текст и не хочу ограничивать пользователя из значений, доступных в списке. Если я набираю текст, он правильно фильтрует мой список. Но когда я не нажимаю на элемент и не перехожу к следующему полю, мой текст будет отброшен.

Любые идеи?

Спасибо и уважением, Alex

Я не хочу, чтобы показать свой код, потому что я думаю, что это не правильно, но это было предложено:

<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# ComboBox. Поэтому я пошел вперед и использовал два отдельных поля. Это не то, что я хотел, но он работает сейчас:

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

Answer 1

здесь решение:

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.

Answer 2

Вы можете использовать мечения атрибут , как описано в документации: https://github.com/angular-ui/ui-select/wiki/ui-select

<ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors"> 
... 
</ui-select> 

Answer 3

Я думаю, что я нашел способ позволяют пользователю создавать новые записи. Используйте «на выбор» приписывать передать функцию, которая принимает $ выбрать в качестве параметра, как показано ниже:

<ui-select ng-model="person.selected" 
     theme="select2" 
     on-select="peopleSel($select)" 
     tagging 
     reset-search-input="false" 
     > 

    <ui-select-match placeholder="Enter a name...">{{$select.selected.name}}</ui-select-match> 
    <ui-select-choices repeat="sel in people | filter: {name: $select.search}"> 
    <div ng-bind-html="sel.name | highlight: $select.search"></div> 
    </ui-select-choices> 
    </ui-select> 

Затем создать функцию, которая добавляет новую запись, когда переменная clickTriggeredSelect ложна:

$scope.peopleSel= function(sel) { 
    if (sel.search && ! sel.clickTriggeredSelect) { 
    if (! sel.selected || sel.selected.name != sel.search) { 
     //Search for an existing entry for the given name 
     var newOne= personSearch(sel.search); 
     if (newOne === null) { 
     //Create a new entry since one does not exist 
     newOne= { name: sel.search, email: 'none', country: 'unknown' }; 
     $scope.people.push(newOne); 
     } 
     //Make the found or created entry the selected one 
     sel.selected= newOne; 
    } 
    } 
    sel.search= ''; //optional clearing of search pattern 
}; 

Обратите внимание, что определение personSearch не приводится здесь. Также этот подход тестирования clickTriggeredSelect может использоваться, чтобы позволить пользователю отменить выбор поля, если предпочтительной является пустая запись.

ПВХ

Answer 4

Я раздвоенный пользовательский интерфейс, выберите проект, чтобы эту функцию через позволяют свободных от текста атрибута

<ui-select allow-free-text="true" ng-model="ctrl.freeTextDemo.color2" theme="bootstrap" style="width: 800px;" title="Choose a color"> 
    <ui-select-match placeholder="Select color...">{{$select.selected}}</ui-select-match> 
    <ui-select-choices repeat="color in ctrl.availableColors | filter: $select.search"> 
     <div ng-bind-html="color | highlight: $select.search"></div> 
    </ui-select-choices> 
</ui-select> 

Вот plnker

Пока мой запрос тянуть не принимается угловое разрешение ui, вы можете получить сборку ui-select, которая включает мой патч на my own repo