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

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 に答える