Need a way to register and fire a callback on clicking a tag (In addition to making it the active match) in a multiple select list. #2169
Description
Hello,
Noticed that ui-select with multiple attribute doesn't fire any callback when a tag is clicked from the matches list. This hinders the user to access the selected/active tag value when clicking on it.
After digging further found that the only way to access the selected tag is $select.selected[$selectMultiple.activeMatchIndex]
The value add of exposing the above tag via a callback is,
- If the choices object has a property that is too big to read and if we want to display the property value on click of the tag
- The user wants to remove the tag on clicking it, this comes handy.
<span ng-repeat="$item in $select.selected track by $index">
<span
class="ui-select-match-item btn btn-default btn-xs"
tabindex="-1"
type="button"
ng-disabled="$select.disabled"
ng-click="$selectMultiple.activeMatchIndex = $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)"> ×</span>
<span uis-transclude-append></span>
</span>
</span>
</span>
I would like to contribute on the above by allowing the user to register a callback to be fired with the tag value and the $selectMultiple
object reference when it is clicked.
Something like ng-click="selectMultiple.activeMatchIndex = $index; $select.tagClicked($selectMultiple, $item);"
UI-Select version: 0.19.3
Angular JS version: 1.2.8
Created a simple plunker demonstrating the above.