как заблокировать ввод свободного текста в angular ui-select

Ссылка на библиотеку: https://github.com/angular-ui/ui-select

Есть ли способ заблокировать редактирование пользователя в multiSelect?

Я хочу разрешить пользователю очищать только ранее выбранные данные, но как запретить ему вводить любой свободный текст в пользовательском интерфейсе?

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, в настоящее время в пользовательском интерфейсе выбираются цвета «Синий, красный», и пользователь может очистить эти значения, но если пользователь пытается ввести какой-либо текст в пользовательском интерфейсе, выберите его для модификации,

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

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


angularjs ui-select angular-ui-select
person praveenpds    schedule 06.03.2015    source источник

Ответы (4)


arrow_upward
6
arrow_downward

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

можно использовать атрибут 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.colors}}

person P.JAYASRI    schedule 06.03.2015
comment
извини . пожалуйста, удалите вызов() на ng-change, я просто опубликую его для проверки. забыл удалить. - person P.JAYASRI; 06.03.2015

arrow_upward
1
arrow_downward

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

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

Разметка

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

Рабочий план

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

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

person Pankaj Parkar    schedule 06.03.2015
comment
@praveenpds Вам помогло? - person Pankaj Parkar; 09.03.2015

arrow_upward
1
arrow_downward

Тот факт, что текст для ввода поиска существует, является настоящей проблемой, когда мы используем планшеты и смартфоны. Клавиатура всегда всплывает.

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

Я пытаюсь добавить все это, но это не работает.

person Rija Skyline    schedule 18.10.2018

arrow_upward
-1
arrow_downward

В дополнение к ответу 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"
           >
  ...

person Shawn Dotey    schedule 31.10.2016