如何阻止在angular ui select中输入自由文本

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中选择"蓝色，红色"颜色，用户可以清除这些值，但如果用户试图在ui中输入一些文本，则选择其允许修改，

"但我的要求是阻止用户在该字段中输入此类文本。"

提前谢谢。

Answer 1

禁止在选择框中输入字母

您可以使用按键属性

此处为实时代码http://plnkr.co/edit/jE0qBpewzvHG5oamB7vQ?s=TIKKc2Zmyq5lcvXI&p=预览

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

选择：｛｛multipleDemo.colors｝｝

---

Answer 2

ui-select-match用于显示所选值，该值也可以包含模板。

我建议您维护两个模板以显示在ui-select-match元素中。当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>

工作Plunkr

我认为ui-select对此没有任何解决方案。以上是我的解决方法：-）

希望这能对你有所帮助，谢谢。

Answer 3

当我们使用pad和智能手机时，搜索输入文本的存在是一个真正的问题。键盘总是弹出。

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

我试着把所有这些都加进去，但没有用。

Answer 4

除了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"
           >
  ...