как блокировать свободный ввод текста в угловом Ui-выберите

Question

Lib ссылка: https://github.com/angular-ui/ui-select

Есть ли способ, чтобы блокировать редактирование пользователя в MULTISELECT?

Я хочу, чтобы позволить пользователю только очистить предварительно выбранные данные, Но как блокировать его от попадания любого свободного текста в UI-выберите

http://plnkr.co/edit/juqoNOt1z1Gb349XabQ2?p=preview

<ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;"> 
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match> 
    <ui-select-choices repeat="color in availableColors | filter:$select.search"> 
     {{color}} 
    </ui-select-choices> 
    </ui-select> 

ссылку выше коды и plunker, В настоящее время в меню выбора «синий, красный» выбираются и пользователь может очистить эти значения, но если пользователь попытается ввести какой-либо текст в ui, выберите его, разрешающий модификацию,

«но мое требование состоит в том, чтобы заблокировать пользователя от ввода таких текстов в этом поле».

Заранее спасибо.

Answer 1

Предотвратить ввести букву в поле выбора

вы можете использовать OnKeyPress атрибут

живой код здесь http://plnkr.co/edit/jE0qBpewzvHG5oamB7vQ?s=TIKKc2Zmyq5lcvXI&p=preview

<ui-select multiple ng-model="multipleDemo.colors" onkeypress="return false;" theme="select2" ng-change="call()" ng-disabled="disabled" style="width: 300px;"> 
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match> 
<ui-select-choices repeat="color in availableColors | filter:$select.search"> 
    {{color}} 
</ui-select-choices> 

Selected: {{multipleDemo. цвета}}

---

Answer 2

ui-select-match используется для отображения выбранного значения, которые могут также содержать шаблон.

Я предлагаю вам сохранить два шаблона для показа внутри элемента ui-select-match. 1-й будет показан, когда ui-select не отключается, а другой будет, когда ui-select отключен.

Markup

<ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;"> 
    <ui-select-match placeholder="Select colors..."> 
     <span ng-if="!disabled">{{$item}}</span> 
     <span ng-if="disabled"> 
     <a class="glyphicon glyphicon-remove" ng-click="$select.removeChoice($index)" tabindex="-1"></a> 
     {{$item}} 
     </span> 
    </ui-select-match> 
    <ui-select-choices repeat="color in availableColors | filter:$select.search"> 
     {{color}} 
    </ui-select-choices> 
    </ui-select> 

Working Plunkr

Я не думаю, что так есть какое-либо решение по этому вопросу на ui-select. Выше это обходное решение :-)

Надеюсь, это поможет вам, спасибо.

Answer 3

В дополнение к P.JAYASRI ответ, вы можете также добавить SASS CSS, чтобы удалить курсор ввода:

.ui-select-container.disable-filter { 
 
    .ui-select-search { 
 
     color: transparent; 
 
     text-shadow: 0 0 0 gray; 
 
    } 
 
}

Так это будет выглядеть так:

<ui-select 
 
      multiple ng-model="multipleDemo.colors" 
 
      onkeypress="return false;" 
 
      theme="select2" 
 
      ng-change="call()" 
 
      ng-disabled="disabled" 
 
      style="width: 300px;" 
 
      class="disable-filter" 
 
      > 
 
    ...