Question

自由链接：https://github.com/angular-ui/ui-select

有没有办法在multiSelect中阻止用户编辑？

我想让用户只清除以前选择的数据，但是如何阻止他输入ui-select中的任何自由文本

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-select＆＃34; Blue，Red＆＃34;选择了颜色，用户可以清除这些值，但如果用户尝试在ui中输入一些文本，请选择允许修改，

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

提前致谢。

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>

已选择：{{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>

Working Plunkr

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

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

Answer 3

当我们使用平板电脑和智能手机时，存在搜索输入文本这一事实确实很麻烦。键盘总是弹出。

<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来删除输入光标：

＆＃13;

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

＆＃13;

所以它看起来像：

＆＃13;

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

＆＃13;

如何阻止以角度ui-select输入的自由文本

4 个答案: