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>'); 
}]);