Angular UI选择单击时删除项目

Question

我正在使用UI-Select，我注意到点击任何标签会使它们变成蓝色，这对我想做的事情没有任何意义。如果点击，我希望删除它们。经过检查，我注意到了一个＆＃39; x＆＃39;这引发了以下事件：

SELECT AFCDIMPI
FROM ANA_IMPIEGHI

进行一些挖掘我找到了这个被解雇的模板，它是＆＃34; match-multiple.tpl.html＆＃34;。我将ng-click复制到输入中，使其如下所示。

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

打破了标签系统（见图）

编辑 - 尝试以下操作，错误消失但点击没有做任何事情。

<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-cick附加到标记而不是＆＃39; X＆＃39;？

Answer 1

你说的是正确的。我看不到你的完整代码（包括Angular代码）所以很难看出它为什么不起作用，但是this 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-点击范围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>');
}]);