Angular UI选择删除项目点击

Question

我正在使用UI-Select，我注意到点击任何标签都会使它们变成蓝色，这对我的操作没有任何意义。如果点击，我想将它们移除。经检查，我注意到一个“x”是打完以下：

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

做一些挖掘，我发现这何处发射了，这是“巅峰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)" 

我如何可以附加NG-依序按到标签而不是在“X”？

Answer 1

你说得对。我看不到你的完整代码（包括Angular代码），所以很难看出它为什么不起作用，然而this Fiddle显示了一个工作示例 - 向ui-select中添加了几个名称，然后单击名称上的任意位置（而不仅仅是'x'）删除它们。

ui的选被配置如下：

<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> 

下面的代码覆盖默认的“自举/匹配multiple.tpl.html”模板与这对纳克单击事件的自定义一个父跨度（像你一样） - 注意，已经有一个ng-click在跨度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>'); 
}]);