Разрешить ввод вручную в ui-select

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

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

Ответ 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>

КОНТРОЛЛЕР -

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

Вот CodePen решение.

Ответ 2

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

<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 имеет значение false:

$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 может использоваться, чтобы позволить пользователю отменить выбор поля, если предпочтительной является пустая запись.

ПВХ

Ответ 3

Вы можете использовать атрибут tagging, как описано в документации: 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>

Ответ 4

Я разветкил проект ui-select, чтобы разрешить эту функцию с помощью атрибута allow-free-text

<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

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