Angular UI Select remove item on click

Question

I am using UI-Select, I noticed that clicking any of the tags makes them blue, which has no purpose for what I would like to do. I would like them removed if clicked. Upon inspection I noticed an 'x' that fires off following:

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

Doing some digging I found the template where this is fired off, it's "match-multiple.tpl.html". I copied the ng-click to the input, making it the following.

<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 broke the tag system (see image)

EDIT - tried the following, error is gone but the click is not doing anything.

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

How can I attach the ng-cick to the tag as opposed to the 'X'?

Answer 1

You're on the right lines. I can't see your full code (including Angular code) so it's difficult to see why it's not working, however this Fiddle shows a working example - add a couple of names into the ui-select then click anywhere on the name (not just the 'x') to remove them.

The 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 which has the ng-click event on the parent span (like you did) - note that there was already an ng-click on the span ng-click="$selectMultiple.activeMatchIndex = $index;", I had to remove this and replace it with ng-click="$selectMultiple.removeChoice($index)" . This block of code tells ui-select to use this custom template rather than it's default one:

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