5

私はUI-Selectを使用していますが、いずれかのタグをクリックすると青色になることに気付きました。これは、やりたいことの目的がありません。クリックしたら削除してほしいです。調べてみると、次のように発火する「x」に気付きました。

ng-click="$selectMultiple.removeChoice($index)"

掘り下げてみると、これが発射されるテンプレートが見つかりました。それは「match-multiple.tpl.html」です。ng-click を入力にコピーして、次のようにしました。

<span class="ui-select-match">
  <span ng-repeat="$item in $select.selected">
    <span 
      class="ui-select-match-item btn btn-default btn-xs"
      tabindex="-1"
      type="button"
      ng-disabled="$select.disabled"

      ng-click="$selectMultiple.removeChoice($index)"
      ng-class="{'btn-primary':$selectMultiple.activeMatchIndex === $index, 'select-locked':$select.isLocked(this, $index)}"
      ui-select-sort="$select.selected">
        <span class="close ui-select-match-close" ng-hide="$select.disabled" ng-click="$selectMultiple.removeChoice($index)">&nbsp;&times;</span>
    <span uis-transclude-append></span>
  </span>
 </span>
</span>

これにより、タグシステムが壊れました（画像を参照） ここに画像の説明を入力

編集-次を試しましたが、エラーはなくなりましたが、クリックしても何も起こりません。

        ng-click="$selectMultiple.activeMatchIndex.removeChoice($index)"

「X」ではなくng-cick をタグに付けるにはどうすればよいですか?

4

1 に答える 1

6

あなたは正しい線にいます。完全なコード (Angular コードを含む) が表示されないため、機能しない理由を理解するのは困難ですが、この Fiddleは機能する例を示しています - ui-select にいくつかの名前を追加し、名前の任意の場所をクリックします (単に'x') をクリックしてそれらを削除します。

ui-select は次のように構成されます。

  <ui-select multiple tagging ng-model="vm.selected" theme="bootstrap">
     <ui-select-match placeholder="Pick one...">{{$item.value}}</ui-select-match>
     <ui-select-choices repeat="val in vm.values | filter: $select.search track by val.value">
        <div ng-bind="val.value | highlight: $select.search"></div>
     </ui-select-choices>
  </ui-select>

次のコードは、デフォルトの 'bootstrap/match-multiple.tpl.html' テンプレートを、親スパンで ng-click イベントを持つカスタム テンプレートで上書きします (あなたがしたように) - すでに ng-click があったことに注意してくださいspan ng-click="$selectMultiple.activeMatchIndex = $index;"、これを削除して に置き換える必要がありましたng-click="$selectMultiple.removeChoice($index)"。このコード ブロックは、既定のテンプレートではなく、このカスタム テンプレートを使用するように ui-select に指示します。

app.run(['$templateCache', function($templateCache) {
  $templateCache.put('bootstrap/match-multiple.tpl.html',
  '<span class="ui-select-match">' +
      '<span ng-repeat="$item in $select.selected track by $index">' +
          '<span ' +
              'ng-click="$selectMultiple.removeChoice($index)" ' +
              'class="ui-select-match-item btn btn-default btn-xs" ' +
              'tabindex="-1" ' +
              'type="button" ' +
              'ng-disabled="$select.disabled" ' +
              'ng-class="{\'btn-primary\':$selectMultiple.activeMatchIndex === $index, \'select-locked\':$select.isLocked(this, $index)}" ' +
              'ui-select-sort="$select.selected">' +
            '<span class="close ui-select-match-close" ng-hide="$select.disabled" ng-click="$selectMultiple.removeChoice($index)">&nbsp;&times;</span>' +
            '<span uis-transclude-append></span>' +
        '</span>' +
      '</span>' +
  '</span>');
}]);
于 2016-10-12T09:02:03.680 に答える