Angular User Interface Select an item to remove

Question

I use UI-Select , I noticed that clicking any of the tags makes them blue, which has nothing to do with what I would like to do. I would like them to be deleted by clicking. After inspection, I noticed an "x" that works as follows:

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

After doing some digging, I found the template in which it was run, this is "match-multiple.tpl.html". I copied ng-click to the input, making it next.

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

This violated the tag system (see image)

EDIT - I tried the following, the error disappeared, but the click does nothing.

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

How can I attach ng-cick to a tag and not to "X"?

Answer 1

You are on the right lines. I don’t see your full code (including Angular code), so it’s hard to understand why it does not work, however this script shows a working example - add a couple of names to ui-select, then click anywhere in the name (and not just “x”) to remove them.

ui-select is configured as follows:

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

The following code overrides the default bootstrap / match-multiple.tpl.html template with a custom one that has an ng-click event in the parent range (like you) - note that ng-click="$selectMultiple.activeMatchIndex = $index;" already exists - click on the ng-click="$selectMultiple.activeMatchIndex = $index;" range ng-click="$selectMultiple.activeMatchIndex = $index;" I had to remove this and replace it with ng-click="$selectMultiple.removeChoice($index)" . This code block tells u-select to use this custom template, and not by default:

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