0

库链接：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“蓝色，红色”颜色被选中，用户可以清除这些值，但如果用户试图在ui中输入一些文本，选择它允许修改，

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

提前致谢。

4

4 回答 4

6

防止在选择框中输入字母，

您可以使用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}}

于 2015-03-06T11:20:43.987 回答
1

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。以上是我的解决方法:-)

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

于 2015-03-06T17:34:46.180 回答
1

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

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

我尝试添加所有这些，但它不起作用。

于 2018-10-18T14:53:04.250 回答
-1

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

于 2016-10-31T21:44:43.000 回答